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 |
通过设置大小限制来实现,详见下文示例 |
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 几个加载器。