webpack之优化篇（一）：优化静态资源

webpack系列说明

已完成：

基础篇

1. webpack之基础篇（一）：webpack的基础认识
2. webpack之基础篇（二）：前端基本开发环境的搭建
3. webpack之基础篇（三）：配置loader和plugin
4. webpack之基础篇（四）：webpack-dev-server浅析
5. webpack之基础篇（五）：配置开发、测试、生产环境

优化篇

1. webpack之优化篇（一）：优化静态资源
2. webpack之优化篇（二）：优化配置提高构建速度
3. webpack之优化篇（三）：http压缩之Gzip
4. webpack之优化篇（四）：webpack DllPlugin配置的代替方案hard-source-webpack-plugin

原理篇

1. webpack之原理篇（二）：hash、chunkhash、contenthash的认

编写中：

1. webpack之原理篇（一）：webpack的工作流程和原理
2. webpack之原理篇（三）：webpack-dev-server原理
3. webpack之原理篇（四）：手写loader
4. webpack之原理篇（五）：手写plugin

图片资源

对于项目中的图片资源，我们主要从两方面进行优化：

1. 对资源进行压缩，减少体积。
2. 减少请求的数量，降低服务器压力。

对资源进行压缩，减少体积，我们使用对应的loader进行处理。

使用file-loader 来处理图片文件

module.exports = {
   
   
  // ...
  module: {
   
   
    rules: [
      {
   
   
        test: /.*\.(gif|png|jpe?g|svg|webp)$/i,
        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
              },
          },
        ],
      },
    ],
  },
}

当我们要将一些图片转换为base64 uri，减少http请求时，就可以用url-loader进行处理
url-loader

module.exports = {
   
   
  module: