🍉 加载中...


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

2 minute read

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 通过设置大小限制来实现,详见下文示例
 1const path = require('path');
 2
 3module.exports = {
 4  entry: './src/index.js',
 5  output: {
 6    filename: 'main.js',
 7    path: path.resolve(__dirname, 'dist')
 8  },
 9  module: {
10    rules: [
11      {
12        test: /\.txt/,
13        type: 'asset',
14       parser: {
15         dataUrlCondition: {
16           maxSize: 4 * 1024 // 资源大小限制(4kb)
17         }
18       }
19      }
20    ]
21  },
22};

旧项目兼容处理

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

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

备注

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

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