Webpack系列——如何编写一个 Plugin

webpack.config.js

const path = require('path')
const CopyrightWebpackPlugin = require('./plugins/copyright-webpack-plugin')
​
module.exports = {
    mode: 'development',
    entry: {
        main: './src/index.js'
    },
    plugins: [
        new CopyrightWebpackPlugin({
            name: 'pluginParams'
        })
    ]
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'
    }
}

根目录创建 plugins 文件夹，在文件夹中创建一个 copyright-webpack-plugin.js 文件

注： loader 是一个函数(function)， plugin 是一个 类(class)

copyright-webpack-plugin.js

class CopyrightWebpackPlugin {
    constructor(options) {
        console.log('插件被使用了, 传入的参数为：'， options)
    }
    // 参数 compiler 是 webpack 的一个实例
    // compiler 存放着所有配置内容，包括所有打包的相关内容
    // compiler.hooks 定义了打包过程中的时刻值（钩子）
    // emit 时刻：将打包的资源输出到 输出目录(dist) 前,是一个异步的时刻值
    apply(compiler) {
        // compile 时刻是同步的时刻
        // 同步的时刻的参数中， 第二个方法参数只传一个 compilation 参数
        compiler.hooks.compile.tap('CopyrightWebpackPlugin', (compilation) => {
            console.log('compiler')
        })
        // compilation 存放着这一次打包的内容
        compiler.hooks.emit.tapAsync('CopyrightWebpackPlugin', (compilation, callback) => {
            // 打包生成的内容存放在compilation.assets
            // console.log(compilation.assets)
            // 打包输出前添加一个 copyright.txt 文件
            compilation.assets['copyright.txt'] = {
                source: function() {
                    return 'copyright output by plugin'
                }
                size: function() {
                    return 26
                }
            };
            // 使用 tapAsyns 时 最后一定要调用一下 callback
            callback()
        })
    }
}
​
module.exports = CopyrightWebpackPlugin;

对于 compilation 中拥有哪些属性，可以通过 node 额度调试工具查看

在 package.json 中

第一个参数 --inspect 表示开启 Node 调试工具，--inspect-brk在运行 webpack.js 进行调试时，在 webpack 执行时的第一行上打上断点

{
    // ...
    "script": {
        "debug": "node --inspect --inspect-brk node_modules/webpack/bin/webpack.js"
    }
}

class CopyrightWebpackPlugin {
    constructor(options) {
        console.log('插件被使用了, 传入的参数为：'， options)
    }
    apply(compiler) {
        compiler.hooks.compile.tap('CopyrightWebpackPlugin', (compilation) => {
            console.log('compiler')
        })
        compiler.hooks.emit.tapAsync('CopyrightWebpackPlugin', (compilation, callback) => {
            debugger;
            compilation.assets['copyright.txt'] = {
                source: function() {
                    return 'copyright output by plugin'
                }
                size: function() {
                    return 26
                }
            };
            callback()
        })
    }
}
​
module.exports = CopyrightWebpackPlugin;

运行 npm run debbug 后可打开浏览器控制台，在 Node 调试工具中进行调试

此时可鼠标移动到 需要查看的变量或方法中的变量进行查看，或者在右侧的 watch 中添加需要监测的变量查看。