webpack打包图片时遇到的问题

当使用background引入图片时：如

.img-box2 {
  background-image: url("../public/open.png");
  width: 300px;
  height: 300px;
}

直接用npm run build进行打包会报下列错误：

提示我们需要使用loader，于是乎

使用file-loader：

npm install file-loader -D

并且在webpack.config.js中加入配置：

const config = {
...
  module: {
    ...
    rules: [
      {
        test: /\.(jpe?g|png|gif)$/i,
        use: ['file-loader'],
      },
    ]
  }
}

发现虽然url引入了，但是无法实现图片的渲染

修改配置为：

{
  test: /\.(jpe?g|png|gif)$/i,
  use: [
    {
      loader: "file-loader",
      options: {
        esModule: false,
      },
    },
  ],
  type: "javascript/auto",
},

即可。

提一嘴：在使用background引入图片时，记得给对应的元素设置宽高，否则也无法渲然。

换用url-loader

{
  test: /\.(jpe?g|png|gif)$/i,
  use: [
    {
      loader: "url-loader",
      options: {
        // limit 要放在esModule: false 上面，否则不起作用
        limit: 8 * 1024,
        esModule: false,
      },
    },
  ],
  type: "javascript/auto",
},

当图片大小小于limit值时，会把图片变成base64格式，大于limit时，会则直接拷贝图片。

资源模块的使用

webpack5 新增资源模块(asset module)，允许使用资源文件（字体，图标等）而无需配置额外的 loader。 资源模块支持以下四个配置：

1. asset/resource 将资源分割为单独的文件，并导出 url，类似之前的 file-loader 的功能.
2. asset/inline 将资源导出为 dataUrl 的形式，类似之前的 url-loader 的小于 limit 参数时功能.
3. asset/source 将资源导出为源码（source code）. 类似的 raw-loader 功能.
4. asset 会根据文件大小来选择使用哪种类型，当文件小于 8 KB（默认） 的时候会使用 asset/inline，否则会使用 asset/resource

上面代码修改后为：

{
  test: /\.(jpe?g|png|gif)$/i,
  type: "asset",
  generator: {
    // 输出文件位置以及文件名
    // [ext] 自带 "." 这个与 url-loader 配置不同
    filename: "[name][hash:8][ext]",
  },
  parser: {
    dataUrlCondition: {
      // 超过1kb 不转 base64
      maxSize: 1 * 1024,
    },
  },
},

打包后和之前一样