webpack5 url-loader打包图片资源大小与limit限制结合时，生成重复图片资源，页面也不能正常显示打包后的图片的问题的解决

目录：

图片引用在./src/css/style.css中：

background: url(../imgs/small.jpg) no-repeat;

首先使用webpack5，打包./src/imgs中的小图片，大小为6.98KB，小于webpack.config.js中配置中limit的值，具体步骤如下：

1. 安装url-loader

npm install url-loader --save-dev

2. webpack.config.js中配置规则

rules: [
  {
    test: /\.(png|jpg|gif|jpeg)$/,
    use: [
      {
        loader: 'url-loader',
        options: {
          limit: 8192,
        },
      },
    ],
  },
],

3. 执行npm run dev，没有报错，在dist文件夹中生成了一个图片，且该图片无法正常预览。但是正常情况下该图片小于limit值时，会将该图片转为base64图片，并且可以在浏览器中正常预览。

 查找发现产生该问题的原因在于：webpack5弃用了url-loader，根据资源模块（  https://webpack.docschina.org/guides/asset-modules/）中的提示，在rules中设置type: 'javascript/auto'来解决 asset 重复的问题。

 webpack.config.js中设置type：

     {
        test: /\.(png|jpg|jpeg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ],
        type: 'javascript/auto'
      }

4. 再次执行npm run dev，dist文件夹中没有生成小图片，浏览器中预览页面发现图片名称并不是以base64的格式显示，而是[object Module]：

 该问题的原因在于：url-loader在新版本中esModule默认为true，webpack.config.js中采用的是CommonJS规范，与url-loader的esModule不同，因此手动设置为false可以解决。

 webpack.config.js中设置esModule：

{
        test: /\.(png|jpg|jpeg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
              name: 'img/[name].[hash:8].[ext]',
              esModule: false
            }
          }
        ],
        type: 'javascript/auto'
      }

5. 再次执行npm run dev，dist文件夹中没有生成小图片，浏览器中查看，小图片被正常打包转换为base64图片，页面中也正常显示：

 6. 将style.css样式中的小图片改为大图片，执行npm run dev，由于还未安装file-loader，此时报错：Error: Cannot find module 'file-loader'

安装file-loader：

npm install file-loader -D

再次执行npm run dev，dist文件夹下会生成对应的图片，浏览器页面中也可以正常显示：

 7. 上述第6步生成的图片直接被存放到dist文件夹下，并且图片的文件名是随机命名的，很不便于后期对图片的管理和使用，为了统一图片存放路径和名称，设置一个name规则。

webpack.config.js中设置：

{
        test: /\.(png|jpg|jpeg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
              name: 'img/[name].[hash:8].[ext]',  // []内表示变量，name：原图片名，hash:8：取8位哈希值，ext：文件扩展名
              esModule: false
            }
          }
        ],
        type: 'javascript/auto'
      }

执行npm run dev，生成的图片存放于dist文件夹下的img文件夹中，并且图片的名称是按照设置的name 规则生成的：

标签：npm,webpack5,name,url,loader,webpack,打包,图片
来源： https://blog.csdn.net/u010234868/article/details/121401041