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

但是有一个问题，输出的图片路径的路径有两个点: dsj.854c05..png

原因就是 .[ext]  .会在路径中生成而且ext是后缀名本身也会带一个点

//这样就解决了
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所以不用设置filename

asset

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

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

加载字体图标

这里采用的是阿里图标

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

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