模块化项目引入图片

我们使用webpack 构建的项目，会遇到在 HTML 使用图片，但图片无法正常显示的现象。这是因为 webpack 或者 rollup 构建的项目都是一切皆对象，不管是 css 或者 图片在 js 中都会被看做是模块，故需要进行引入才能使用。

webpack 在webpack.config.js 添加对相关文件格式的处理插件（vue-cli / create-react-app 会在默认完成以下设置）

// webpack.config.js
module.exports = {
  module:{
    rules: [
      {
        test: /\.(jpg|png|gif)$/,
        use: {
          loader: "url-loader",
          options: {
            name: "[name]_[hash].[ext]",
             optputPath: "imges/",
              limit: 2080 // 小于该值的 图片进行 base64编码
          }
        }
      }
    ]
  }
}

commonjs 方式引入 模块

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

//比如：

es6 模块引入 模块

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

commonjs 和 es6 模块的区别

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

• commonjs 是运行时进行对模块的加载，故无法对实现tree-shaking。

• commonjs 是一种值的拷贝（虽为浅拷贝，但也是一种拷贝，而不是指针地址的赋值指向，这一点就和 es6 有直接的区别，这一点也是运行时加载的原因）。

• commonjs 因为是值的拷贝，故被赋值后的变量是可以重新被赋值的（可以接受新的值），因为值拷贝的原因，也导致一经赋值后，原来的赋值对象的值发生改变了，也不会影响到 被赋值的变量的现有值（排除浅拷贝的原因引起同步改变）。

es6模块 ( import xxx from "xxx" )

• es6 模块是 编译时加载，之所以能实现编译时就进行加载，主要是 es6 模块是 地址引用指向，在编译是就已经固定好地址的指针，可以理解为 在编译时 该模块就知道了 模块将要指向的目标地址了。

• es6 模块因为是 地址引用，故规定 es6 模块的值是 read-only ，只可读，不可重新赋值，导致指针地址的改变（排除对象引起的地址引用从而导致对象内部值可重新赋值的现象）。

• es6 模块每一个文件中 import("xxx") 都是指向 同一个地址的，只需要原文件发生改变，那么所有的文件引用了这个 import("xxx") 都会发生改变。

• 在编程上 es6 模块 只需在 文件的开头 import 一遍就行了，后继的重复 import 是无效的。 而 commonjs 是不一样的，每一个require("xxx") 都是独立的，不会产生联系的，移除的 require("xxx") 不会印象到其他的地方的 require("xxx")。