webpack5处理图片资源

Posted 2022-12-16 天界程序员

  在过去webpack4中处理图片采用的loader是file-loader和url-loader, 可能还有image-webpack-loader进行处理图片。

• file-loader: 在css 和html 主页中，相对路径的图片都会被处理，发布到输出目录中
• url-loader: 是对file-loader的封装，因此在安装了file-loader和url-loader 后，在webpack.config.js 中只对url-loader 做配置即可。url-loader的自身功能是给图片一个limit 标准，当图片小于limit时，使用base64 的格式引用图片；否则，使用url 路径引用图片。
• image-webpack-loader: 压缩图片。

示例配置：

    test: /\\.(png|svg|jpg|gif)$/,
    use: 
        loader: 'url-loader',
        options: 
            name:'assets/[name].[ext]',
            limit:2048
        
    
,

当图片小于limit 时，会直接把图片的数据流，即base64 格式，写入到<img> 标签或css 中

现在 Webpack5 已经将file-loader和url-loader两个 Loader 功能内置到 Webpack 里了，我们只需要简单配置即可处理图片资源

示例配置：

module: 
    rules: [
      
        test: /\\.(png|jpe?g|gif|webp)$/,
        type: "asset",
      ,
    ],
  ,

资源模块类型(asset module type)，通过添加 4 种新的模块类型，来替换所有这些 loader：

• asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现。
• asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现。
• asset/source 导出资源的源代码。之前通过使用 raw-loader 实现。
• asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现。

  当在 webpack 5 中使用旧的 assets loader（如 file-loader/url-loader/raw-loader 等）和 asset 模块时，你可能想停止当前 asset 模块的处理，并再次启动处理，这可能会导致 asset 重复，你可以通过将 asset 模块的类型设置为 'javascript/auto' 来解决。

这个时候你添加测试图片进行测试：

• src/images/img1.jpeg
• src/images/img2.png
• src/images/img3.gif

将图片引入在css中：

.box1
  width: 100px;
  height: 100px;
  background-image: url("../images/img1.jpeg");
  background-size: cover; 

.box2
  width: 100px;
  height: 100px;
  background-image: url("../images/img2.png");
  background-size: cover; 

.box3
  width: 100px;
  height: 100px;
  background-image: url("../images/img3.gif");
  background-size: cover; 

运行webpack:

npx webpack

可以在index.html中查看图片是否加载，此时如果查看 dist 目录的话，会发现多了三张图片资源

因为 Webpack 会将所有打包好的资源输出到 dist 目录下

为什么样式资源没有呢？

因为经过 style-loader 的处理，样式资源打包到 main.js 里面去了，所以没有额外输出出来。

---

优化图片资源

将小于某个大小的图片转化成 data URI 形式（Base64 格式）

• 优点：减少请求数量
• 缺点：体积变得更大

此时输出的图片文件就只有两张，有一张图片以 data URI 形式内置到 js 中了 （注意：需要将上次打包生成的文件清空，再重新打包才有效果）

module.exports = 
  //...
  module: 
    rules: [
      
        test: /\\.(png|jpe?g|gif|webp)$/,
        type: "asset",
        parser: 
          dataUrlCondition: 
            maxSize: 4 * 1024, // 小于4kb的图片会被base64处理
          ,
        ,
      ,
    ],
  ,
;

如果一个模块源码大小小于 maxSize，那么模块会被作为一个 Base64 编码的字符串注入到包中， 否则模块文件会被生成到输出的目标目录中。

dataUrlCondition可以用对象的格式也可以用函数的格式具体参考地址：Rule.parser.dataUrlCondition