webpack-资源模块类型(asset module type)使用详解

我们当前使用的webpack版本是webpack5：

• 在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(base64)。之前通过使用 url-loader 实现；
• asset/source- 导出资源的源代码。之前通过使用 raw-loader 实现；
• asset- 可以通过配置选择将资源打包成单独的文件还是data URI。之前通过使用 url-loader，并且通过配置限制资源体积实现；

Asset module type的使用

• asset/resource

-加载图片：

export default = {
   module: {
     rules: [
             {
              test: /\.(png|jpe?g|gif|svg)$/,
              type: "asset/resource",    // file-loader的效果
              generator: {
                filename: "img/[name].[hash:6][ext]"  //打包后的输出地址
              },
            }
          ]
        }
    }

 但是，如何可以自定义文件的输出路径和文件名呢？

• 方式一：修改output，添加assetModuleFilename属性；(这种方式会修改所有通过asset module type打包的文件的输出地址)
• 方式二：在Rule中，添加一个generator属性，并且设置filename； （推荐这种方式，不同类型的类型使用不同的设置）

module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./build"),
   // 通过assets module type打包资源的输出地址
    assetModuleFilename: "img/[name].[hash:6][ext]"
  }
}

-加载字体文件

    如果我们需要使用某些特殊的字体或者字体图标，那么我们会引入很多字体相关的文件，webpack本身不能处理字体文件，我们可以选择使用file-loader来处理，也可以选择直接使用webpack5的资源模块类型来处理。

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

•  asset/inline

asset实现url-loader的limit效果,可以将图片资源转换成base64格式

export default = {
   module: {
     rules: [
             {
               test: /\.(png|jpe?g|gif|svg)$/,
               type: "asset/inline",    // url-loader
             }
           ]
          }
        }

• assets

asset实现url-loader的limit效果，并且通过配置选择是否将资源打包为base64

• 步骤一：将type修改为asset；
• 步骤二：添加一个parser属性，并且制定dataUrl的条件，添加maxSize属性；

export default = {
   module: {
     rules: [
             {
               test: /\.(png|jpe?g|gif|svg)$/,
               type: "asset",    //url-loader
               generator: {
                 filename: "img/[name].[hash:6][ext]"
               },
               parser: {
                 dataUrlCondition: {
                 maxSize: 100 * 1024
               }
             }
           ]
          }
        }