05_webpack的asset module

在webpack5之前，加载一些资源我们需要使用一些loader,如raw-loader、url-loader、file-loader

在webpack5开始，我们可以直接使用资源模块类型(asset module type)，来替代上面的loader

 

资源模块类型（asset module type）

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，并且配置资源体积限制实现。

 

asset/resource

{
        test: /\.(png|jpe?g|gif|svg)$/,
        type: "asset/resource"
}

如何指定输出目录

在output中指定assetModuleFilename
output: {
    // 输出入文件的名字
    filename: "bundle.js",
    // 输出的地方(不能直接写./build)这里要写绝对路径
    // path(node的内置模块)__dirname(当前文件所在的绝对路径),拼接上./build
    path: path.resolve(__dirname, "./build"),
    // 这里指定输出目录：不推荐
    assetModuleFilename: "img/[name].[hash:6][ext]"
  },    

但是这样子设置路径又不太好，我想针对于匹配的东西单独做一个设置，如果你是在output中写死的话，我所有的module type打包的文件都是放在那里面的，我们并不想那样做，那么怎么解决这个问题

{
        test: /\.(png|jpe?g|gif|svg)$/,
        type: "asset/resource",
        generator: {
          filename: "img/[name].[hash:6][ext]"
        }
}

 

asset/inline

{
        test: /\.(png|jpe?g|gif|svg)$/,
        type: "asset/inline",//将图片进行base64编码，编码后的源码放到打包的js文件中
}

他是把资源直接打包成Base64所以不用设置filename
优势：少发送请求
缺点：js包过大，下载时间变长，导致解析、执行慢

 

asset

如果你想行url-loader一样，当资源小于某个限制就转成Base64,如果大于某个限制就复制到输出文件中去(file-loader)

      {
        test: /\.(png|jpe?g|gif|svg)$/,
        type: "asset",
        generator: {
//       文件生成目录
          filename: 'img/[name].[hash:6][ext]'
        },
        parser: {
          dataUrlCondition: {
//         最大限制，小于限制转换Base64,以byte为单位
            maxSize: 200 * 1024
          }
        }
      }        

 对小图片进行base64编码，对大图片进行单独打包变成URL

 

 

加载字体图标

这里采用的是阿里图标

 

 对图标进行引入，加入到依赖关系图中

@import "../font/iconfont.css";

因为这个css引用了iconfont.ttf、iconfont.woff

所以当你npm run build的时候webpack不认识这些文件，当webpack吧这些文件当成模块去解析的时候，会解析失败

 

怎么解决
在webpack5以前会通过file-loader或者url-loader进行处理

但是在webpack5就不需要这样子处理了

如果你想对这些文件进行复制，像这种字体文件不会做base64编码的

 

所以就可以使用asset module type 进行处理

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