Webpack中plugin详解

1. Plugin基础

1.1. 基础使用

Webpack 通过 Plugin 机制让其更加灵活，以适应各种应用场景。在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。

一个最基础的 Plugin 的代码是这样的：

class BasicPlugin {
  // 在构造函数中获取用户给该插件传入的配置
  constructor(options) {}

  // Webpack 会调用 BasicPlugin 实例的 apply 方法给插件实例传入 compiler 对象
  apply(compiler) {
    compiler.plugin('compilation', function (compilation) {
      // 在 compilation 阶段的事件
    });
  }
}

// 导出 Plugin
module.exports = BasicPlugin;

在使用这个 Plugin 时，相关配置代码如下：

const BasicPlugin = require('./BasicPlugin.js');

module.exports = {
  plugins: [
    new BasicPlugin(options),
  ],
};

Webpack 启动后，在读取配置的过程中会先执行 new BasicPlugin(options) 初始化一个 BasicPlugin 实例。在初始化 compiler 对象后，再调用 basicPlugin.apply(compiler) 给插件实例传入 compiler 对象。插件实例在获取到 compiler 对象后，就可以通过 compiler.plugin(事件名称，回调函数) 监听到 Webpack 广播出来的事件。并且可以通过 compiler 对象去操作 Webpack。

1.2. Plugin的职责

Plugin 的职责是扩展 Webpack 的功能，而不仅仅是文件的转换。它们可以在 Webpack 的整个生命周期中执行特定的任务，如打包优化、资源管理和环境变量注入等。Plugin 的功能非常强大，可以覆盖构建的各个方面。

1.3. 常用 Plugin 盘点

1. HtmlWebpackPlugin

• 作用：生成 HTML 文件，并自动注入打包后的资源。

• 配置：

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html', // 模板文件
    }),
  ],
};

2. CleanWebpackPlugin

• 作用：每次构建前清理输出目录。

• 配置：

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  plugins: [
    new CleanWebpackPlugin(),
  ],
};

3. MiniCssExtractPlugin

• 作用：将 CSS 提取到单独的文件中。

• 配置：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
       filename: '[name].[contenthash].css', // 输出的 css 文件名
    }),
  ],
};

4. TerserWebpackPlugin

• 作用：压缩 JavaScript 代码。

• 配置：

const TerserPlugin = require('terser-webpack-plugin');

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