06-asset-module-type

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

加载图片

如何可以自定义文件的输出路径和文件名

• 修改output，添加assetModuleFilename属性
• 在Rule中，添加一个generator属性，并且设置filename；

方式一

output: {
    filename: "bundle.js",
    // 必须是一个绝对路径
    path: path.resolve(__dirname, "./build"),
    assetModuleFilename: "img/[name].[hash:6][ext]"
 },
 {
        test: /\.(png|jpe?g|gif|svg)$/,
        type: "asset/resource", //file-loader的效果
 },

方式二

 //方式二
 {
        test: /\.(png|jpe?g|gif|svg)$/,
        type: "asset/resource", //file-loader的效果
        generator: {
          filename: "img/[name].[hash:6][ext]"
        }
 },
 // url-loader的limit效果   
 {
        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]"
        }
 }
 //或者
 {
     test: /\.ttf|eot|woff2?$/i,
     loader:'file-loader',
     options: {
          name: "[name].[hash:6].[ext]",
          outputPath:'font'
      }
 }