webpack 自定义插件插件如何在vscode中进行调试

如果你要写一个自定义webpack插件，开发过程需要调试，正常使用console，也能在终端打印出内容，但是如果需要追踪一些参数，这时候打debug进行调试会更方便。

1、比如自定义的插件是：UnusedCode.js

// 插件代码
class UnusedCode {
  constructor(options) {
  }
  
  apply(compiler) {
    // 指定一个挂载到 webpack 自身的事件钩子。
    compiler.hooks.emit.tapAsync(
      'UnusedCode',
      (compilation, callback) => {
        console.log('这是一个示例插件！');
        // console.log(
        //   '这里表示了资源的单次构建的 `compilation` 对象：',
        //   compilation
        // );
      
        // 用 webpack 提供的插件 API 处理构建过程
        compilation.addModule(/* ... */);

        callback();
      }
    );
  }
}

module.exports = UnusedCode;

2、在webpack中配置使用

const UnusedCode = require('./config/UnusedCode.js')

module.exports = {
  ...,
  plugins: [
    new UnusedCode(),
  ]
}

3、在package.json中配置script命令

 "scripts": {
   "test": "node --inspect-brk ./config/UnusedCode.js",
 }

点击vscode调试工具，新开两个个调试终端，一个执行npm run test，另一个执行npm run xx（执行webpack的命令）

这样就能走进你的自定义插件里打debug了。

4、其他

当然，webpack也给出了调试方案，可看此链接，但是感觉有点麻烦。