在vue.config.js中优化webpack配置的方法（持续更新）

前言：

在日常开发中我们离不开打包工具webpack，但是不同的配置会影响我们项目的运行构建时间，也会影响打包之后项目包的大小，这篇文章记录一下我使用过的可以优化webpack的配置。

注：以本专栏上篇文章里面的vue.config.js为基础，去加配置

一、压缩图片

1、先下载依赖

npm install --save-dev image-webpack-loader

2、在vue.config.js的module.exports上面先定义设置值

①默认设置：（4M的图片使用默认设置压缩成1.4M）

const defaultOptions = {
  bypassOnDebug: true,
};

②自定义设置 

 const customOptions = {
      mozjpeg: {
        progressive: true,
        quality: 50
      },
      optipng: {
        enabled: true,
      },
      pngquant: {
        quality: [0.5, 0.65],
        speed: 4
      },
      gifsicle: {
        interlaced: false,
      },
      // 不支持WEBP就不要写这一项
      webp: {
        quality: 75
      }
  }

3、在chainWebpack中加入配置：

chainWebpack: config => {
 
    config.module.rule('imag