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

目录:

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打包图片资源大小与limit限制结合时,生成重复图片资源,页面也不能正常显示打包后的图片的问题的解决

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

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

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

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

 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]:

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

 该问题的原因在于: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图片,页面中也正常显示:

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

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

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

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

安装file-loader:

npm install file-loader -D

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

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

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

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

 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 规则生成的:

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

 

上一篇:webpack配置加载less样式文件


下一篇:关于Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): ModuleBuildErro