我們使用webpack 構(gòu)建的項目，會遇到在 HTML 使用圖片，但圖片無法正常顯示的現(xiàn)象。這是因為 webpack 或者 rollup 構(gòu)建的項目都是一切皆對象，不管是 css 或者 圖片在 js 中都會被看做是模塊，故需要進(jìn)行引入才能使用。

webpack 在webpack.config.js 添加對相關(guān)文件格式的處理插件（vue-cli / create-react-app 會在默認(rèn)完成以下設(shè)置）

// webpack.config.js
module.exports = {
  module:{
    rules: [
      {
        test: /\.(jpg|png|gif)$/,
        use: {
          loader: "url-loader",
          options: {
            name: "[name]_[hash].[ext]",
             optputPath: "imges/",
              limit: 2080 // 小于該值的 圖片進(jìn)行 base64編碼
          }
        }
      }
    ]
  }
}

commonjs 方式引入 模塊

let srcImg = require("./imges/xxx.png");  // 引入后，只需使用 srcImg

//比如：
<img :src = srcImg />

es6 模塊引入 模塊

  import srcImg from "./imges/xxx.png"

<img :src = srcImg>

commonjs 和 es6 模塊的區(qū)別

commonjs （let xxx = require("xxx")）

• commonjs 是運(yùn)行時進(jìn)行對模塊的加載，故無法對實現(xiàn)tree-shaking。

• commonjs 是一種值的拷貝（雖為淺拷貝，但也是一種拷貝，而不是指針地址的賦值指向，這一點(diǎn)就和 es6 有直接的區(qū)別，這一點(diǎn)也是運(yùn)行時加載的原因）。

• commonjs 因為是值的拷貝，故被賦值后的變量是可以重新被賦值的（可以接受新的值），因為值拷貝的原因，也導(dǎo)致一經(jīng)賦值后，原來的賦值對象的值發(fā)生改變了，也不會影響到 被賦值的變量的現(xiàn)有值（排除淺拷貝的原因引起同步改變）。

es6模塊 ( import xxx from "xxx" )

• es6 模塊是 編譯時加載，之所以能實現(xiàn)編譯時就進(jìn)行加載，主要是 es6 模塊是 地址引用指向，在編譯是就已經(jīng)固定好地址的指針，可以理解為 在編譯時 該模塊就知道了 模塊將要指向的目標(biāo)地址了。

• es6 模塊因為是 地址引用，故規(guī)定 es6 模塊的值是 read-only ，只可讀，不可重新賦值，導(dǎo)致指針地址的改變（排除對象引起的地址引用從而導(dǎo)致對象內(nèi)部值可重新賦值的現(xiàn)象）。

• es6 模塊每一個文件中 import("xxx") 都是指向 同一個地址的，只需要原文件發(fā)生改變，那么所有的文件引用了這個 import("xxx") 都會發(fā)生改變。

• 在編程上 es6 模塊 只需在 文件的開頭 import 一遍就行了，后繼的重復(fù) import 是無效的。 而 commonjs 是不一樣的，每一個require("xxx") 都是獨(dú)立的，不會產(chǎn)生聯(lián)系的，移除的 require("xxx") 不會印象到其他的地方的 require("xxx")。