Webpack5 中 raw-loader, url-loader, file-loader 替代品

Webpack 5 之前

资源处理通常使用 raw-loader, url-loader, file-loader 几个加载器实现。

  • raw-loader 将文件作为字符串导入
  • url-loader 将文件作为数据 URI 内联到包中
  • file-loader 将文件发送到输出目录

Wepack 5

Wepack5 中官方新添加了 4 种新资源模块(Asset Modules) 替代了这些加载器

  • asset/resource 导出一个单独的文件并返回 URL。
  • asset/inline 导出资产的数据 URI。
  • asset/source 导出资产的源代码。
  • asset 自动在导出数据 URI 和 发出单独的文件之间进行选择。

替代关系

旧方式 新方式 备注
file-loader asset/resource
url-loader asset/inline
raw-loader asset/source
url-loader asset 通过设置大小限制来实现,详见下文示例
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.txt/,
        type: 'asset',
       parser: {
         dataUrlCondition: {
           maxSize: 4 * 1024 // 资源大小限制(4kb)
         }
       }
      }
    ]
  },
};

旧项目兼容处理

使用旧方式与 WebPack 5 搭配使用,可能发生资源被重复处理的情况。这可以通过将资源模块类型设置为’javascript/auto’解决。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
module.exports = {
  module: {
   rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
            }
          },
        ],
        type: 'javascript/auto'  // 设置 javascript/auto 以避免资源被重复处理的情况
      },
   ]
  },
}

备注

官方相关文档: https://webpack.js.org/guides/asset-modules/

TODO: 上文中提到的旧方式指使用 file-loader / url-loader/ raw-loader 几个加载器。