02-TerserWebpackPlugin：优化你的 JavaScript 代码

TerserWebpackPlugin 是一个用于优化和压缩 JavaScript 代码的 webpack 插件。它基于 Terser 引擎进行代码优化，并且可以配置为并行运行以更快地完成任务。

以下是如何在 webpack 配置文件中使用 TerserWebpackPlugin 的示例代码：

const TerserWebpackPlugin = require('terser-webpack-plugin');
 
module.exports = {
  optimization: {
    minimize: true,
    minimizer: [new TerserWebpackPlugin({
      terserOptions: {
        compress: {
          drop_console: true, // 移除所有的 `console` 语句
        },
        output: {
          comments: false, // 去掉注释
        },
      },
      extractComments: false, // 不从代码中提取注释
    })],
  },
};

在这个配置中，optimization.minimize 被设置为 true 来启用代码的最小化。optimization.minimizer 数组中包含了一个新的 TerserWebpackPlugin 实例，它接收一个选项对象，其中 terserOptions 用于配置 Terser 的行为。在这个例子中，我们设置了 drop_console 选项为 true 来移除所有的 console 语句，并且去掉了代码中的注释。

确保你已经安装了 terser-webpack-plugin 包，如果没有，可以通过 npm 安装：

npm install terser-webpack-plugin --save-dev

使用 TerserWebpackPlugin 可以显著减少最终生成的 JavaScript 文件的大小，从而提高加载速度，并且还能去除不必要的代码来保护源码不被轻易阅读。