Webpack 插件（Plugin）核心机制与常用配置详解

作者：编译时光时间：2026-10-25 08:41:32浏览：287

本文深入解析 Webpack 插件（Plugin）的工作机制，阐述其与 Loader 的区别及在编译生命周期中的作用。通过具体代码示例，详细讲解 HtmlWebpackPlugin、CleanWebpackPlugin、MiniCssExtractPlugin 及 DefinePlugin 等常用插件的配置方法与使用场景，帮助开发者掌握插件化开发的核心技巧。

一、Plugin 的作用

Plugin 即“插件”，主要解决 Loader 无法处理的任务。Loader 仅负责特定模块的转换，而 Plugin 能够执行更广泛的操作，包括打包优化、资源管理和环境变量注入等。
Plugin 贯穿 Webpack 的整个编译周期，运行在 Webpack 的不同阶段，通过钩子（Hooks）或生命周期进行交互。

一、Plugin 的作用

二、Plugin 配置方式

通常，在 webpack.config.js 配置文件的导出对象中，通过 plugins 属性传入 new 实例化的插件对象来进行配置。

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 访问内置的插件
module.exports = {
  ...
  // 配置 plugins
  plugins: [
    new webpack.ProgressPlugin(),
    new HtmlWebpackPlugin({ template: './src/index.html' }),
  ],
};

三、Plugin 的本质

Plugin 本质上是一个包含 apply 方法的 JavaScript 对象。Webpack 在 compiler 阶段会调用此 apply 方法，使得插件在整个编译生命周期中都能访问 compiler 对象。

const pluginName = 'ConsoleLogOnBuildWebpackPlugin';

class ConsoleLogOnBuildWebpackPlugin {
  apply(compiler) {
    compiler.hooks.run.tap(pluginName, (compilation) => {
      console.log('webpack 构建过程开始！');
    });
  }
}

module.exports = ConsoleLogOnBuildWebpackPlugin;

关于整个编译生命周期的关键钩子如下：

entry-option：初始化选项。
run。
compile：真正开始编译，在创建 compilation 对象之前。
compilation：生成 compilation 对象后。
make：从 entry 开始递归分析依赖，准备对每个模块进行 build。
after-compile：编译 build 过程结束。
emit：在将内存中 assets 内容写入磁盘文件夹之前。
after-emit：在将内存中 assets 内容写入磁盘文件夹之后。
done：完成所有编译过程。
failed：编译失败时触发。

四、常见 Plugin 介绍

4-1 html-webpack-plugin

作用：

利用 HtmlWebpackPlugin 自动生成 HTML 文件，并自动引入打包后的 JS 文件。
HtmlWebpackPlugin 基于内置的 EJS 模板生成，支持自定义模板。在 HTML 模板中，可通过 <%=htmlWebpackPlugin.options.XXX%> 的方式获取配置值。

// webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
 ...
  plugins: [
     new HtmlWebpackPlugin({
            title: "webpack案例",
            template: "./public/index.html", // 指定生成的 html 模版
        }),
  ]
};

4-2 clean-webpack-plugin

作用：每次打包时，CleanWebpackPlugin 会自动删除上一次生成的打包文件。

const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports = {
 ...
  plugins: [
    new CleanWebpackPlugin()
  ]
}

4-3 mini-css-extract-plugin

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

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
 ...,
  module: {
   rules: [
    {
     test: /.s[ac]ss$/,
     use: [
      {
       loader: MiniCssExtractPlugin.loader
     },
          'css-loader',
          'sass-loader'
        ]
   }
   ]
 },
  plugins: [
    ...,
    new MiniCssExtractPlugin({
     filename: '[name].css'
    }),
    ...
  ]
}

4-4 DefinePlugin

作用：DefinePlugin 允许在编译时创建配置的全局常量，是 Webpack 内置插件（无需单独安装）。

const { DefinePlugun } = require('webpack')

module.exports = {
 ...
    plugins:[
        new DefinePlugin({
            BASE_URL: '"./"' // 等价于 const BASE_URL = "./" 他的赋值方式有点奇葩
        }),
    ]
}

在编译 template 模块时，可通过以下形式获取全局对象。

  <!-- BASE_URL 是一个全局的常量，是通过 DefinePlugin 这个插件去定义的 -->
  <link rel="icon" href="<%= BASE_URL %>favicon.ico" rel="external nofollow" >

4-5 copy-webpack-plugin

作用：CopyWebpackPlugin 用于复制文件或目录到指定区域。例如在 Vue 打包过程中，若将文件放入 public 目录，该目录内容会被复制到 dist 文件夹中。

new CopyWebpackPlugin({
            // 通过 CopyWebpackPlugin 插件将 public 中的文件复制到打包后的文件夹下
            // patterns 是匹配的意思
            patterns: [
                {
                    from: "public", // 设置从哪一个源中开始复制
                    to: "build" // 可以省略，默认是复制到打包输出的路径，会根据 output 
                    globOptions: {
                        ignore: ['**/DS_Store', '**/index.html', '**/abc.txt'] // ** 表示的是 from 的文件夹
                    }
                    // globOptions：设置一些额外的选项，其中可以编写需要忽略的文件,
                    //比如.DS_Store：mac目录下回自动生成的一个文件；.index.html：也不需要复制，因为我们已经通过HtmlWebpackPlugin完成了index.html的生成
                }
            ]
        })