【亲测免费】 Terser Webpack Plugin 使用教程

目录结构及介绍

Terser Webpack Plugin 是一个用于压缩 JavaScript 代码的 Webpack 插件。以下是其基本的目录结构：

terser-webpack-plugin/
├── LICENSE
├── README.md
├── dist/
│   ├── cjs.js
│   ├── cjs.js.map
│   ├── esm.js
│   ├── esm.js.map
│   ├── types.d.ts
│   └── types.d.ts.map
├── package.json
├── src/
│   ├── index.js
│   ├── options.js
│   ├── utils/
│   └── ...
├── test/
│   ├── integration/
│   ├── unit/
│   └── ...
└── ...

主要目录和文件介绍：

• LICENSE: 项目的许可证文件。
• README.md: 项目的说明文档。
• dist/: 编译后的文件，包含 CommonJS 和 ES Module 格式的文件。
• package.json: 项目的依赖和脚本配置文件。
• src/: 源代码目录，包含插件的主要逻辑。
• test/: 测试代码目录，包含单元测试和集成测试。

项目的启动文件介绍

Terser Webpack Plugin 的启动文件位于 src/index.js。这个文件是插件的入口点，负责初始化和配置插件。

// src/index.js
const TerserPlugin = require('terser-webpack-plugin');

module.exports = TerserPlugin;

主要功能：

• 导出 TerserPlugin 类，供 Webpack 配置文件使用。
• 初始化插件并应用用户提供的配置选项。

项目的配置文件介绍

Terser Webpack Plugin 的配置文件通常位于 Webpack 的配置文件中，例如 webpack.config.js。以下是一个基本的配置示例：

// webpack.config.js
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
};

主要配置选项：

• minimize: 启用或禁用代码压缩。
• minimizer: 指定使用的压缩插件，这里使用 TerserPlugin。

TerserPlugin 的详细配置选项：

• test: 匹配需要压缩的文件。
• include: 指定包含的文件。
• exclude: 指定排除的文件。
• parallel: 启用并行压缩以提高性能。
• minify: 自定义压缩函数。
• terserOptions: Terser 的配置选项。

通过这些配置选项，可以灵活地控制代码压缩的行为和效果。

---

以上是 Terser Webpack Plugin 的基本使用教程，涵盖了项目的目录结构、启动文件和配置文件的介绍。希望这些内容能帮助你更好地理解和使用这个插件。