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
               }
             }
           ]
          }
        }

 

 

你可能感兴趣的:(webpack学习笔记,javascript,webpack,前端)