扶着你玩转webpack4——图片等文件的处理

图片等文件的处理

---

因为 webpack 无法识别图片文件，所以我们需要一个针对于处理图片文件的 loader。
对于这个场景，我们需要使用 file-loader。 (之前说过 css-loader 会处理 url 的哦~)

module: {
  rules: [
	{
      test: /\.(png|jpe?g|gif|svg)$/,
      use: 'file-loader'
    }
  ]
}

但我们会发现，在 vue-cli 中它对于一些小图片会进行 base64 处理，这样就减少了一次请求。对于这种小图片我们之前的策略是使用 雪碧图 ，但现在很少采用这种方案了，一是不容易维护，二是导致合成的图会很大，影响初始加载。
base64 是一堆字符串在HTML中，现在通常采用这个方案。当然如果对于小图标你使用了 svg 就更好。

所以这里我们需要使用 url-loader ，这个包拓展了 file-loader ，可以配置一个 limit ，使得图片小于这个值的时候进行 base64 编码。

module: {
  rules: [
	{
      test: /\.(png|jpe?g|gif|svg)$/,
      loader: 'url-loader',
      options: {
		limit: 10000 // 单位是byte
	  }
    }
  ]
}

雪碧图的配置就不贴了，使用的是 webpack-spritesmith 就ok，会生成 css/less/stylus/scss 等代码。

另外一个需求就是图片的压缩了。 vue-cli 并没有配置图片压缩。可以借助 image-webpack-loader 来对图片进行压缩。

{
 test: /\.(png|svg|jpe?g|gif)$/,
 use: [{
   loader: 'file-loader',
   options: {}
 }, {
   loader: 'image-webpack-loader',
   options: {
     mozjpeg: { // 压缩 jpeg 的配置
       progressive: true,
       quality: 65
     },
     optipng: { // 使用 imagemin-optipng 压缩 png，enable: false 为关闭
       enabled: false,
     },
     pngquant: { // 使用 imagemin-pngquant 压缩 png
       quality: '65-90',
       speed: 4
     },
     gifsicle: { // 压缩 gif 的配置
       interlaced: false,
     },
     webp: { // 开启 webp，会把 jpg 和 png 图片压缩为 webp 格式
       quality: 75
     }
   }
 }

也可以使用 url-loader

{
   test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
   use: [{
     loader: 'url-loader',
     options: {
       limit: 10000
     }
   }, {
     loader: 'image-webpack-loader',
     options: {
       mozjpeg: { // 压缩 jpeg 的配置
         progressive: true,
         quality: 65
       },
       optipng: { // 使用 imagemin-optipng 压缩 png，enable: false 为关闭
         enabled: false,
       },
       pngquant: { // 使用 imagemin-pngquant 压缩 png
         quality: '65-90',
         speed: 4
       },
       gifsicle: { // 压缩 gif 的配置
         interlaced: false,
       },
       webp: { // 开启 webp，会把 jpg 和 png 图片压缩为 webp 格式
         quality: 75
       }
     },
   }]
 }

这个配置是先压缩再进行 url-loader 处理的。