如何在webpack項目中調試loader插件

Posted on by

最近，在學習webpack使用時，發現webpack-replace-loader配置正則不起用，調試插件後才發現，search健值竟然不支持正則的寫法，後有換成string-replace-loader插件，這個loader的search健值支持正則寫法，問題得到解決。這裡記錄下loader的調試方法：

首先需要準備node環境

第一步：下載全局安裝 node-nightly

npm install -g --save-dev node-nightly

第二步：添加調試命令 

 "node-nightly": "node-nightly --inspect-brk  ./node_modules/webpack/bin/webpack.js",

第三步：命令行中運行 npm run node-nightly

第四步： 打開谷歌瀏覽器在url上輸入 chrome://inspect/#devices

點擊inspect 進入調試頁面

第五步： 在vscode中的node_module裡面找到loader的index.js文件，在module.exports函數裡面加上debugger;

到此，可以按照平時調試js一樣，調試對應loader腳本。

到此這篇關於如何在webpack項目中調試loader插件的文章就介紹到這瞭,更多相關webpack調試loader插件內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！ 

推薦閱讀：