插件概念

webpackjsorg-main核心概念

title: 插件概念
sort: 4
contributors:

TheLarkInn
jhnns
rouzbeh84
johnstew
MisterDev
byzyk
chenxsan

插件（Plugins）是 webpack 的支柱。webpack 本身构建在你在 webpack 配置中使用的同一套插件系统之上！

插件还用于执行loader无法执行的任何其他任务。webpack 开箱即用地提供了许多类似的插件。

在插件中使用 webpack-sources 包时，建议优先使用 compiler.webpack.sources，而不是从 webpack 或 webpack-sources 中导入，以避免持久缓存时的版本冲突。

插件剖析

一个 webpack 插件是一个具有 apply 方法的 JavaScript 对象。该 apply 方法会由 webpack 编译器调用，使你能够访问整个编译生命周期。

ConsoleLogOnBuildWebpackPlugin.js

js 复制代码

const pluginName = "ConsoleLogOnBuildWebpackPlugin";

class ConsoleLogOnBuildWebpackPlugin {
  apply(compiler) {
    compiler.hooks.run.tap(pluginName, (compilation) => {
      console.log("The webpack build process is starting!");
    });
  }
}

export default ConsoleLogOnBuildWebpackPlugin;

建议将 compiler hook 的 tap 方法的第一个参数设为插件名的驼峰（camelized）版本。建议使用常量来保存该名称，以便在所有 hooks 中复用。

用法

由于插件可以接受参数/选项，你必须在 webpack 配置的 plugins 属性中传入 new 实例。

根据你使用 webpack 的方式，有多种使用插件的方法。

配置方式

webpack.config.js

js 复制代码

import path from "node:path";
import { fileURLToPath } from "node:url";
import HtmlWebpackPlugin from "html-webpack-plugin";
import webpack from "webpack"; // 访问内置插件

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  entry: "./path/to/my/entry/file.js",
  output: {
    filename: "my-first-webpack.bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: "babel-loader",
      },
    ],
  },
  plugins: [
    new webpack.ProgressPlugin(),
    new HtmlWebpackPlugin({ template: "./src/index.html" }),
  ],
};

ProgressPlugin 用于自定义编译期间进度报告的方式，HtmlWebpackPlugin 将生成一个 HTML 文件，其中通过 script 标签包含 my-first-webpack.bundle.js 文件。

Node API

使用 Node API 时，也可以通过配置中的 plugins 属性传入插件。

some-node-script.js

js 复制代码

import webpack from "webpack"; // 访问 webpack 运行时
import configuration from "./webpack.config.js";

const compiler = webpack(configuration);

new webpack.ProgressPlugin().apply(compiler);

compiler.run((err, stats) => {
  // ...
});

你知道吗：上面看到的示例与 webpack 运行时本身极为相似！在 webpack 源码中隐藏着许多很好的使用示例，你可以将它们应用到你自己的配置和脚本中！

帮助我们改进文档

发现翻译问题或内容错误？请告诉我们。