【webpack进阶系列】写个 plugin

[amandakelake]

一、创建一个plugin

一个插件由以下构成

• 一个类
• 定义 apply 方法
• 指定一个触及到 webpack 本身的 事件钩子 。
• 操作 webpack 内部的实例特定数据。
• 在实现功能后调用 webpack 提供的 callback。

// 一个类
class LgcWebpackPlugin {
    constructor(options) {
        this.options = options;
    }
    // 定义 apply 方法
    apply(compiler) {
        // 指定一个触及到 webpack 本身的  [事件钩子](https://webpack.docschina.org/api/compiler-hooks/) 。
        compiler.hooks.emit.tapAsync('LgcWebpackPlugin', (compilation, callback) => {
            // 操作 webpack 内部的实例特定数据，在这里做任何你想做的事情
            console.log('compilation', compilation);
            // 在实现功能后调用 webpack 提供的 callback
            callback();
        });
    }
}

module.exports = LgcWebpackPlugin;

二、使用插件

// webpack.prod.js
const LgcWebpackPlugin = require('../plugins/lgc-webpack-plugin');

module.exports = {
	// ... other config
	plugins: [
		new LgcWebpackPlugin()
	]
}

其实到这里就已经完事了 ，本想写多一点，但觉得我并不会比文档写的更好 编写一个插件

三、调试plugin

在读文档的过程中，我们会发现两个非常重要的概念：compiler 钩子 compilation 钩子 想要做点什么基本是围绕着两个api展开
但它两涉及的概念有点多，一次次的console.log肯定不会是我们的最佳选择，让我们看看如何利用chrome调试工具快速debug

先在package.json加一条script

"debug": "node --inspect --inspect-brk node_modules/webpack/bin/webpack.js --config ./build/webpack.prod.js"

具体意思如下

• node --inspect 用node启动inspect模式
• --inspect-brk 在第一行打一个断点
• node_modules/webpack/bin/webpack.js webpack执行入口的绝对路径
• --config ./build/webpack.prod.js 如果你有多个配置文件,指定你想要调试的配置

yarn debug跑起来，调试模式已经开启

然后打开chrome浏览器随便一个页面 -> 打开控制台 -> 找到图中的小按钮

点击就能进入debug模式了

如果希望调试某个属性，比如上面说的两个特别重要的钩子compiler 钩子 compilation 钩子

在代码中加入debugger，然后重跑上面的debug流程

进入debug界面后，点击一下右边的蓝色小三角就可以直接进入打断点的地方，再watch任何你想要观察的属性，就可以愉快的进行调试了

到这里为止，剩下的就是多看看别人的插件是怎么玩的，自己多看文档多实践，然后再加点想法，说不定哪天你也能造出一个牛逼的插件

[wlsyne]

老哥 你知道调试的时候为啥会报这种错嘛