深入浅出webpack之加载和处理其他资源

• 在webpack5之前,加载一些资源我们需要使用一些loader,比如row-loader、url-loader、file-loader;
• 在webpack5之后，我们开始直接使用资源模块类型（asset module type）来代替上边的loader

asset module type

• asset/resource发送一个单独的文件并导出url,之前用file-loader来实现

• asset/inline导出一个资源的data URI,之前使用url-loader来实现

• asset/souce导出资源的源代码,之前通过row-loader来实现(不常用)

• asset在导出一个data URI和发送一个单独的文件之间自动选择,之前通过url-loader,并且配置资源体积限制实现

• asset/resource使用方式

  • asset module type不需要单独下载,webpack5中已经内置该模块,在配置文件可直接进行配置

  const path = require('path');
  module.exports = {
      entry:"./src/main.js",
      output:{
          filename:"awei.js",
          path:path.resolve(__dirname,"./build"),
          //导出文件配置方式一
          assetModuleFilename:"img/[name].[hash:6][ext]"
      },
      module:{
          rules:[
              {
                  test:/\.(png|jpg|jpeg|gif|svg)/,
                  type:"asset/resource",
                  //导出文件配置方式二
                  generator:{
                      filename:"img/[name].[hash:6][ext]"
                  }
              }
          ]
      }
  }
  

• asset/inline使用方式

  const path = require('path');
  module.exports = {
      entry:"./src/main.js",
      output:{
          filename:"awei.js",
          path:path.resolve(__dirname,"./build")
      },
      module:{
          rules:[
              {
                  test:/\.(png|jpg|jpeg|gif|svg)/,
                  /*
                  这个属性只能生成base64,如果想实现小于指定大小转成base64,大于就放进图片目录,
                  则使用asset
                  */
                  type:"asset/inline"
              }
          ]
      }
  }
  

• asset使用方式

   const path = require('path');
   module.exports = {
       entry:"./src/main.js",
       output:{
           filename:"awei.js",
           path:path.resolve(__dirname,"./build")
       },
       module:{
           rules:[
               {
                   test:/\.(png|jpg|jpeg|gif|svg)/,
                   /*
                   这样配置就表示文件大于100kb的放进img目录下,小于100kb的直接转换为base64编码
                   */
                   type:"asset",
                   generator:{
                       filename:"img/[name][hash:6][ext]"
                   },
                   parser:{
                       dataUrlCondition:{
                           maxSize:100*1024 // 100kb
                       }
                   }
               },
               {
                   //加载字体文件同理,视频,音频文件也同理
                   test:/\.(ttf|woff|woff2)/,
                   type:"asset/resource",
                   generator:{
                       filename:"font/[name].[hash:6][ext]"
                   }
               }
           ]
       }
   }
  

• 示例代码

  https://gitee.com/weiLZ598/webpack-study.git