webpack5打包图片

最新推荐文章于 2024-07-21 15:11:42 发布

王大瑞的腾

最新推荐文章于 2024-07-21 15:11:42 发布

阅读量1k

点赞数 3

文章标签： webpack

本文链接：https://blog.csdn.net/weixin_58882261/article/details/123836429

版权

本文介绍了从webpack4到webpack5在打包图片方面的变化和升级，详细解析了在webpack5中如何配置和处理图片资源的打包流程。

摘要由CSDN通过智能技术生成

webpack4方法如下：

{
        test: /\.(jpg|png|gif)$/,
        // 要使用一个loader
        // 下载 url-loader file-loader
        dependency: { not: ['url'] },
        use:[
         { loader: 'url-loader',
         options: {
           // 图片大小小于8kb，就会被base64处理
           // 优点:减少请求数量（减轻服务器压力）
           // 缺点：图片体积会更大(文件请求速度更慢)
           limit: 8 * 1024,
          //  问题：因为url-loader默认使用es6模块化解析，而html-loader引入图片是commonjs
          // 解析时会出现问题：[object Module]
          // 解决:关闭url-loader的es6模块化，使用commonjs解析
          esModule:false,
          // 给图片进行重命名
          // [hash:10]取图片的hash前10位
          // [ext]取文件原来拓展名
          name:'[hash:10].[ext]'
         },}
        ],
        type: 'javascript/auto'
      },{
        test: /\.html$/,
        // 处理html文件的img图片（负责引入img，从而能被url-loader进行处理）
        loader: 'html-loader',
      }