webpack4 文档（入门） - 第五章 - plugins

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 后。