webpack5不要再用url-loader了
共 2506字,需浏览 6分钟
·
2021-05-26 21:50
webpack 最出色的功能之一就是,除了引入 JavaScript,还可以通过 loader 或内置的 Asset Modules 引入任何其他类型的文件。
webpack5 新增 Asset Modules 资源模块。
资源模块(asset module)是一种模块类型,它允许使用资源文件(字体,图标等)而无需配置额外 loader。
在 webpack 5 之前,通常使用:
1、raw-loader 将文件导入为字符串。
2、url-loader 将文件作为 data URI 内联到 bundle 中。
3、file-loader 将文件发送到输出目录。
资源模块类型(asset module type),通过添加 4 种新的模块类型,来替换所有这些 loader:
1、asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现。
2、asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现。
3、asset/source 导出资源的源代码。之前通过使用 raw-loader 实现。
4、asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader,并且配置资源体积限制实现。
webpack4 代码
{ =
module: {
rules: [
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
},
},
],
},
],
},
};
webpack5 代码
{ =
module: {
rules: [
{
test: /\.(png|jpg|gif)$/i,
type: 'asset',
parser: {
dataurlCondition: {
maxSize: 8192
}
}
},
],
},
};
webpack4 代码
module.exports = {
module: {
rules: [
{
test: /\.png$/i,
use: 'file-loader'
},
{
test: /\.ico$/i,
use: 'url-loader'
},
{
test: /\.text$/i,
use: 'raw-loader'
},
],
},
};
webpack5 代码
module.exports = {
module: {
rules: [
{
test: /\.png$/i,
use: 'asset/resource'
},
{
test: /\.ico$/i,
use: 'asset/inline'
},
{
test: /\.text$/i,
use: 'asset/source'
},
],
},
};
所以我们以后不要再使用这三个 loader 了,1、raw-loader 2、url-loader 3、file-loader 。并且打开 loader 对应的 github 仓库地址,会看到这样一句话:DEPREACTED for v5: please consider migrating to asset modules. 也就说 v5 版本已经废弃,改成使用资源模块(asset module)了。
当在 webpack 5 中使用旧的 assets loader(如 file-loader/url-loader/raw-loader 等)和 asset 模块时,这可能会导致 asset 重复,所以你可能想阻止 webpack 5 内置的 asset 模块的处理,你可以通过将 asset 模块的类型设置为 'javascript/auto' 来解决。
{ =
module: {
rules: [
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
}
},
],
type: 'javascript/auto'
},
]
},
}
总结:不建议大家再使用旧的 assets loader 如 file-loader/url-loader/raw-loader 。webpack5 已经支持资源模块,通过 type 参数进行配置,可选的参数有:1、asset/resource 2、asset/inline 3、asset/source 4、asset 。