webpack目前最新的版本是5， 但是早在webpack4的时候，可以通过选择不用的mode模式来优化打包的结果。不过所有的优化（optimization）还是可以通过手动配置和重写的。，在构建的时候我们可以针对各个环境配置最佳的输出方式；为此webpack提供了 optimization属性供使用者针对环境做配置。

optimization 设置方式

optimization拥有很多的属性去设置各个关于bundle产出最佳化的配置。

module.exports = {
  // 优化选项
  optimization: {
     ...
  }
}

下面讲解一些比较重要的属性。讲解的例子会配置none模式，避免模式设定影响结果，并且以各个数值作为bundle的档名方便观察。

ps：很多人不知道webpack中的module,chunk,bundle的区别是什么？

解释：webpack中的module,chunk,bundle其实就是同一份逻辑代码在不同的转换场景下取的三个名字： 我们直接写出来的是module,webpack处理的时候是chunk,最后生成浏览器可以直接运行的是bundle，

具体可以看看这篇文章 webpack 中，module，chunk 和 bundle 的区别是什么？ 讲的特别好！

minimize

minimize的值是一个布尔值，默认值是true。主要是告知webpack使用 TerserWebpackPlugin或者是在optimization.minimizer中的插件压缩bundle。

module.exports = {
  // 配置`none`模式，避免模式设定影响结果
  mode: 'none',
  entry: {
    index: './src/index.js',
  },
  // 优化选项
  optimization: {
      minimize: true,
      // minimize: false,
  }
}

我们对minimize字段分别设置true 和false。打包之后的结果如下：

可以看出，minimize: true输出的bundle小了很多。

minimizer

minimizer属性存放一个数组，数组里面可以存放用于代码压缩的插件。可以存放一个或者多个，覆盖默认压缩工具。

即：允许我们通过提供一个或者多个定制过的 TerserPlugin 的实例，覆盖默认压缩工具。

使用语法：[TerserPlugin]或者[function(compiler)]

webpack.config_minimizer.js

const terserPlugin = require('terser-webpack-plugin');
module.exports = {
  mode: 'none',
  entry: './src/index.js',
  optimization: {
    minimize: true,
    minimizer: {
      // 1：直接使用的方式
      new terserPlugin({
         // 你的配置
      }),
    }
  }
}

具体的 TerserWebpackPlugin配置。当然不同的压缩插件的配置方式，直接看他们的使用教程即可。

也是可以使用函数的形式的；如：

module.exports = {
  mode: 'none',
  entry: './src/index.js',
  optimization: {
    minimize: true,
    minimizer: {
 			// 2：使用函数的形式
      function (compiler) {
        const webpackParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');
        new webpackParallelUglifyPlugin({
          // 你的配置
        }).apply(compiler)
      }
    }
  }
}

具体的 webpack-parallel-uglify-plugin。

也可以使用...来访问默认值