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.exports = {  module: {    rules: [      {        test: /\.(png|jpg|gif)$/i,        use: [          {            loader: 'url-loader',            options: {              limit: 8192,            },          },        ],      },    ],  },};


webpack5 代码

module.exports = {  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.exports = {  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 。


浏览 29
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报