WebPack 插件调试
项目是基于 vue-cli 搭建，在vue.config.js中引入插件并启用：
module.exports = {
chainWebpack: config => {
config.plugin('pluginName').use(require('pluginName'));
}
}由于 webpack 插件中你需要在特定的生命周期内获取到回调函数中传入的参数，在调试过程中，console.log的方式不可行，因为 webpack 传入的 stats对象非常大， 命令行中无法展示全，也没办法展开看全。
如果想要打印也不一定可行，因为对象存在循环引用，所以最方便的还是要借助 node --inspect 方法在浏览器里打印或者 debug。
这是官网上插件的 demo 写法：
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;循环引用报错：
TypeError: Converting circular structure to JSON starting at object with constructor 'Timeout'
| property '_idlePrev' object with constructor 'TimersList'
使用方式
通过在 package.json的 scripts 里填入：
"scripts":{
"debug": "node --inspect-brk=9229 ./node_modules/@vue/cli-service/bin/vue-cli-service.js build"
}指定端口号方式，这样即便 kill 掉此次的命名，下次重新跑这个命令的时候 chrome dev 控制台可以立马检测并关联上。
调试入口：
NodeJS 浏览器调试入口
chrome 调试 NodeJS 界面
本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录