WebPack 插件调试

项目是基于 vue-cli 搭建，在vue.config.js中引入插件并启用：

代码语言：javascript复制

module.exports = {
    chainWebpack: config => {
        config.plugin('pluginName').use(require('pluginName'));
    }
}

由于 webpack 插件中你需要在特定的生命周期内获取到回调函数中传入的参数，在调试过程中，console.log的方式不可行，因为 webpack 传入的 stats对象非常大， 命令行中无法展示全，也没办法展开看全。

如果想要打印也不一定可行，因为对象存在循环引用，所以最方便的还是要借助 node --inspect 方法在浏览器里打印或者 debug。

这是官网上插件的 demo 写法：

代码语言：javascript复制

class HelloWorldPlugin {
  apply(compiler) {
    compiler.hooks.done.tap('Hello World Plugin', (
      stats /* stats is passed as an argument when done hook is tapped.  */
    ) => {
      console.log('Hello World!');
    });
  }
}

module.exports = HelloWorldPlugin;

循环引用报错：

使用方式

通过在 package.json的 scripts 里填入：

代码语言：javascript复制

"scripts":{
    "debug": "node --inspect-brk=9229 ./node_modules/@vue/cli-service/bin/vue-cli-service.js build"
}

指定端口号方式，这样即便 kill 掉此次的命名，下次重新跑这个命令的时候 chrome dev 控制台可以立马检测并关联上。

调试入口：

webpack javascript 打包 vue.js

0 人点赞