## 前言 **plugin**是 webpack 的[支柱](https://github.com/webpack/tapable)功能。webpack 自身也是构建于你在 webpack 配置中用到的**相同的插件系统**之上！ 插件目的在于解决[loader](https://webpack.docschina.org/concepts/loaders)无法实现的**其他事**。 ### 用法 ***** 由于**插件**可以携带参数/选项，你必须在 webpack 配置中，向`plugins`属性传入一个`new`实例。 取决于你的 webpack 用法，对应有多种使用插件的方式。 ### 剖析 ***** webpack**插件**是一个具有[`apply`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply)方法的 JavaScript 对象。`apply`方法会被 webpack compiler 调用，并且在**整个**编译生命周期都可以访问 compiler 对象。 **ConsoleLogOnBuildWebpackPlugin.js** ~~~javascript const pluginName = 'ConsoleLogOnBuildWebpackPlugin'; class ConsoleLogOnBuildWebpackPlugin { apply(compiler) { compiler.hooks.run.tap(pluginName, (compilation) => { console.log('webpack 构建过程开始！'); }); } } module.exports = ConsoleLogOnBuildWebpackPlugin; ~~~ compiler hook 的 tap 方法的第一个参数，应该是驼峰式命名的插件名称。建议为此使用一个常量，以便它可以在所有 hook 中重复使用。 ### 配置方式 ***** **webpack.config.js** ~~~javascript const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装 const webpack = require('webpack'); // 访问内置的插件 const path = require('path'); module.exports = { 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`的 JS 文件。 ### 其他 ***** 参考链接：https://webpack.docschina.org/concepts/plugins/