webpack5不要再用url-loader了

简介: webpack5 新增 Asset Modules 资源模块

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/resource2、asset/inline 3、asset/source 4、asset 。

相关文章
el-input的number类型里输入e、+、-符号返回值为空?
el-input的number类型里输入e、+、-符号返回值为空?
613 0
|
11月前
|
前端开发 JavaScript
乾坤qiankun(微前端)样式隔离解决方案--使用插件替换前缀
乾坤qiankun(微前端)样式隔离解决方案--使用插件替换前缀
1690 8
|
10月前
|
网络协议 安全 网络虚拟化
思科交换机配置命令归纳
【11月更文挑战第8天】本文总结了思科交换机的常见配置命令,包括模式转换、基本配置、查看命令、VLAN 配置、Trunk 配置、以太网通道配置、VTP 配置、三层交换机配置、生成树配置以及其他常用命令,适用于网络管理和维护。
908 2
|
存储 监控 前端开发
Sentry 监控部署与使用(详细流程)
Sentry 监控部署与使用(详细流程)
12949 1
|
Web App开发 移动开发 定位技术
15款得心应手的思维导图软件
15款得心应手的思维导图软件
627 6
|
缓存 前端开发 应用服务中间件
看看高手是怎么部署前端代码的
【8月更文挑战第8天】从简单的前端项目部署开始,构建dist文件夹并通过Nginx代理接口请求,以解决跨域问题。为进一步优化大型系统的性能及稳定性,需采用高级部署策略。例如,利用CDN分发静态资源并采用缓存控制减少带宽消耗,通过文件哈希值更新URL确保资源按需刷新。面对大规模部署挑战,采用非覆盖式发布方法避免样式错乱风险,并通过灰度部署逐步验证新版功能,确保服务平稳过渡。借助Nginx实现流量切分,可灵活调整新旧版本流量比例,有效降低上线风险。
221 3
|
缓存 前端开发 JavaScript
如何减少React中无关组件的重渲染
你是否同我一样,总是会遇到一些莫名其妙的渲染问题,有时为了解决bug,需要耗费相当气力来debug呢?快来一起学习下react re-render 这些小技巧吧,或许能帮你减少组件树中无关组件的重渲染及重挂载,可以提升性能,同时也能提高用户体验哟。 案例代码:https://github.com/buzingar/re-render-demos
2545 5
|
JSON JavaScript 数据格式
vue导出excel表格vue-json-excel(最新超容易详细教程)
最近写项目有个功能需要将表格数据导出为excel表格,本文使用vue-json-excel插件实现该功能
2537 0
vue导出excel表格vue-json-excel(最新超容易详细教程)
|
数据采集 测试技术 网络安全
阿萨聊测试 ZAP3:如何测试HTTPS的Web网站?
阿萨聊测试 ZAP3:如何测试HTTPS的Web网站?
338 0
阿萨聊测试 ZAP3:如何测试HTTPS的Web网站?
|
网络协议 Linux
Linux内核源码剖析之TCP保活机制(KeepAlive)
总之,TCP保活机制通过定期发送保活探测报文,以检测空闲连接是否仍然活跃。这种机制在网络通信中有助于及时检测和关闭不再使用的连接,从而节省资源并提高连接的可靠性。
525 0

热门文章

最新文章