WebPack5 处理图片资源

标签：10 WebPack5 处理 use loader test css 图片

过去在 Webpack4 时，我们处理图片资源通过 file-loader 和 url-loader 进行处理

现在 Webpack5 已经将两个 Loader 功能内置到 Webpack 里了，我们只需要简单配置即可处理图片资源

   module: {         rules: [             {                 // 用来匹配 .css 结尾的文件                 test: /\.css$/,                 // use 数组里面 Loader 执行顺序是从右到左                 use: [                     "style-loader",                     "css-loader"                 ],             },             {                 test: /\.less$/i,                 use: [                     // compiles Less to CSS                     'style-loader',                     'css-loader',                     'less-loader',                 ],             },             // 图片优化             {                 test: /\.(png|jpe?g|gif|webp)$/,                 type: 'asset',                 parser: {                     dataUrlCondition: {                         maxSize: 10 * 1024 // 10kb                     }                 },                 //  导出图片名称                 generator: {                     filename: 'static/images/[hash:10][ext][query]'                 }             },             {                 test: /\.js$/,                 exclude: /node_modules/, // 排除node_modules代码不编译                 loader: "babel-loader",             },         ],     },

对图片资源进行优化

将小于某个大小的图片转化成 data URI 形式（Base64 格式）

  parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024 // 小于10kb的图片会被base64处理
          }
        }

• 优点：减少请求数量
• 缺点：体积变得更大

此时输出的图片文件就只有两张，有一张图片以 data URI 形式内置到 js 中了 （注意：需要将上次打包生成的文件清空，再重新打包才有效果）

 

标签：10,WebPack5,处理,use,loader,test,css,图片
From： https://www.cnblogs.com/yxlbk/p/16755126.html