插件是 webpack 的支柱功能。Webpack 自身也是构建于你在 webpack 配置中用到的 相同的插件系统 之上!
插件目的在于解决 loader 无法实现的其他事。Webpack 提供很多开箱即用的 插件。
webpack 插件是一个具有 apply
方法的 JavaScript 对象。apply 方法会被 webpack compiler 调用,并且在 整个 编译生命周期都可以访问 compiler 对象。
ConsoleLogOnBuildWebpackPlugin.js
const pluginName = ConsoleLogOnBuildWebpackPlugin;
class ConsoleLogOnBuildWebpackPlugin {
apply(compiler) {
compiler.hooks.run.tap(pluginName, (compilation) => {
console.log(webpack 构建正在启动!);
});
}
}
module.exports = ConsoleLogOnBuildWebpackPlugin;
compiler hook 的 tap 方法的第一个参数,应该是驼峰式命名的插件名称。建议为此使用一个常量,以便它可以在所有 hook 中重复使用。
由于插件可以携带参数/选项,你必须在 webpack 配置中,向 plugins
属性传入一个 new
实例。
取决于你的 webpack 用法,对应有多种使用插件的方式。
webpack.config.js
const HtmlWebpackPlugin = require(html-webpack-plugin);
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 文件。
在使用 Node API 时,还可以通过配置中的 plugins
属性传入插件。
some-node-script.js
const webpack = require(webpack); // 访问 webpack 运行时(runtime)
const configuration = require(./webpack.config.js);
let compiler = webpack(configuration);
new webpack.ProgressPlugin().apply(compiler);
compiler.run(function (err, stats) {
// ...
});