plugin 是 webpack 的“脊柱”, 可以在 webpack 的配置中添加 plugin 的配置来增强 webpack 的构建功能, webpack 本身也是由一系列的 plugin 构成。plugin 可以完成 loader 不能完成的其他任务。
剖析
webpack 中的 plugin 是一个 JS 对象,它拥有 apply 方法,这个方法会被 webpack 编译器调用,它可以访问整个编译的生命周期。
ConsoleLogOnBuildWebpackPlugin.js
const pluginName = "ConsoleLogOnBuildWebpackPlugin";
class ConsoleLogOnBuildWebpackPlugin {
apply(compiler) { // webpack 编译器
console.log(compiler.hooks);
// run 钩子,webpack 开始启动
// pluginName 是插件的名称,相当于一个键
compiler.hooks.run.tap(pluginName, (compilation) => {
console.log(compiler === compilation); // true
console.log('The webpack build process is starting!!!');
});
}
}
module.exports = ConsoleLogOnBuildWebpackPlugin;
第一个参数是插件名称,使用驼峰命名,为了方便钩子们重用它,它通常被定义为一个常量。
使用
使用插件需要实例化插件,其构造函数可以传入参数/选项。插件的使用方式有多种,这取决怎么使用 webpack 。
Configuration
webpack.config.js
var ConsoleLogOnBuildWebpackPlugin = require('./ConsoleLogOnBuildWebpackPlugin');
module.exports = {
mode: "development",
entry: './index.js',
output: {
path: __dirname + '/dist',
publicPath: '',
filename: 'main.js'
},
plugins: [
new ConsoleLogOnBuildWebpackPlugin(),
]
}
Node API
也可以使用 Node API 手动去打包编译。
config.js
var webpack = require('webpack');
var configuration = require('./webpack.config');
var ConsoleLogOnBuildWebpackPlugin = require('./ConsoleLogOnBuildWebpackPlugin');
let compiler = webpack(configuration);
new webpack.ProgressPlugin().apply(compiler);
new ConsoleLogOnBuildWebpackPlugin().apply(compiler);
执行 node config.js 后。