星星博客 »  > 

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,之前通过使用url-loader实现;
    asset/source 导出资源的源代码。之前通过使用raw-loader实现;
    asset 在导出一个data URI和发送一个单独的文件之间自动选择,之前通过使用url-loader,并且配置资源体积限制实现
  • 采用asset/resource 实现file-loader的效果
module.exports = {
  entry:'./src/main.js',
  output:{
    filename:'bundle.js',//打包后的文件名
    path:path.resolve(__dirname,'./build'), 
    //assetModuleFilename:"img/[name].[hash:6][ext]" //引用资源文件打包后的文件名
  },
  module:{
    rules:[
      {
        test:/\.(png|jpe?g|gif|svg)$/,
        type:"asset/resource",
        generator:{
          filename:"img/[name].[hash:6][ext]"
        }       
      }
    ]
  }
}
  • 采用asset/inline 实现url-loader的效果
 {
   test:/\.(png|jpe?g|gif|svg)$/,
    type:"asset/inline", 
  }
  • 采用asset 实现url-loader的limit效果
{
   test:/\.(png|jpe?g|gif|svg)$/i,
   type:"asset", 
   generator:{
     filename:"img/[name].[hash:6][ext]"
   },
   parser:{
     dataUrlCondition:{
       maxSize: 15 * 1024 //单位B
     }
   }
 }

相关文章