webpack-资源模块类型

最新推荐文章于 2023-03-01 20:20:54 发布

原创最新推荐文章于 2023-03-01 20:20:54 发布 · 403 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#webpack #前端 #node.js

JavaScript 专栏收录该内容

29 篇文章

订阅专栏

本文介绍Webpack5中的资源模块类型(asset module type)，包括asset/resource、asset/inline、asset/source及asset自动选择模式。这些模块类型可以替代之前的file-loader、url-loader等，简化资源文件如图片和字体的处理。

webpack-资源模块类型

1、asset

通过asset 不需要额外安装loader

在webpack5之前，加载这些资源我们需要使用一些loader，比如raw-loader 、url-loader、file-loader；
在webpack5之后，我们可以直接使用资源模块类型（asset module type），来替代上面的这些loader；

资源模块类型(asset module type)，通过添加4 种新的模块类型，来替换所有这些loader：

asset/resource 发送一个单独的文件并导出URL。之前通过使用file-loader 实现；
asset/inline 导出一个资源的data URI。之前通过使用url-loader 实现；
asset/source 导出资源的源代码。之前通过使用raw-loader 实现；
asset 在导出一个data URI 和发送一个单独的文件之间自动选择。之前通过使用url-loader，并且配置资源
体积限制实现

{
        test: /\.(png|jpe?g|gif|svg)$/,
        // type: "asset/resource", file-loader的效果
        // type: "asset/inline", url-loader
        type: 'asset',
        // 设置文件名称
        generator: {
          filename: 'img/[name].[hash:6][ext]',
        },
        // 配置资源体积
        parser: {
          dataUrlCondition: {
            maxSize: 100 * 1024,
          },
        },
      },
      {
        test: /\.ttf|eot|woff2?$/i,
        type: 'asset/resource',
        generator: {
          filename: 'font/[name].[hash:6][ext]',
        },
      },

2、加载字体文件

针对字体和字体图标的处理

{
   test: /\.ttf|eot|woff2?$/i,
   type: 'asset/resource',
   generator: {
     filename: 'font/[name].[hash:6][ext]',
   },
 },