1️⃣ 打包样式文件中的图片资源 ( js 和 css )

2️⃣ file-loade

  • npm install file-loader --save-dev
    1. module: {
    2. rules: [
    3.  {
    4.    test: /\.(png)|(gif)|(jpg)$/,
    5.    use: {
    6.      // 使用 file-loader 来处理 js 中引用的图片, 打包生成引用的图片
    7.      loader: "file-loader",
    8.      options: {
    9.        // 为打包的图片命名
    10.        name: '[name].[hash:8].[ext]',
    11.        // 打包的图片保存在的文件夹
    12.        outputPath: 'img',
    13.        // 图片的 url 地址
    14.        publicPath: '../img',
    15.        // 如果 js 使用 CommonJS 导入图片
    16.        // >>>　不设置 esModule　(　html标签为 <img src = "[object module]" > )
    17.        // >>>  设置后 ( html标签为 <img src="..img/1.7asd5fgh.jpg"> )
    18.        // 如果 JS 使用 ES6 模块化语法可以不设置, 但是推荐始终设置
    19.        // 出现问题的原因是 webpack 会吧 require() 中的代码当做 JS 执行
    20.        // webpack 使用 CommonJS 语法解析而 file-loader 使用 ES6 语法解析
    21.        // 设置 esModule: false 就是禁用 file-loader 使用 ES6 转而使用 CommonJS
    22.        esModule: false
    23.      }
    24.    }
    25.  }
    26. ]
    27. },

    image.png

    2️⃣ url-loader

    npm install file-loader url-loader --save-dev
    补充：url-loader 是对象 file-loader 的上层封装，使用时需配合 file-loader 使用。
    image.png

    1️⃣ 打包 html 中图片资源

    html 中的图片 url-loader 没法处理，它只能处理 js 中引入的图片 / 样式中的图片，不能处理 html 中 img 标签，需要引入其他 html-loader 处理。

    2️⃣ html-loade

    npm install html-loader --save-dev