【webpack 插件開發(fā)】如何在vscode調(diào)試webpack源碼
前言
?最近打算深入學(xué)習(xí)下
?webpack原理，打算翻翻源碼，借此更新webpack系列的知識點，平時學(xué)習(xí)的底稿也挺多的，也該整理出來了
暫定會更新以下知識點
如何實現(xiàn)一個 webpack loader如何實現(xiàn)一個 webpack plugin談?wù)?code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">Tapable 實現(xiàn)一個簡易的 webpackdebug webpack源碼
如何在vscode調(diào)試源碼
?先學(xué)會調(diào)試源碼，在后面開發(fā)loader或者plugin會顯得更得心應(yīng)手，以下是我調(diào)試
?less-loader的分享
使用 vscode + npm 插件
?在 vscode 中安裝插件
?egamma/npm插件。該插件可以幫我們界面直接點擊去運行 package.json 文件中 scripts 下面定義的腳本命令。安裝完成之后，在 Explorer 界面中會出現(xiàn)NPM SCRIPTS的面板，其中就會解析package.json 中定義的腳本命令，這樣只需要點擊即可，不用每次手輸命令行，還帶有 debug 功能，方便調(diào)試。
然后，在程序中想要打斷點的地方打上斷點。例如想要看一下，less-loader 在打包時候的運行過程， 我們可以手動clone less-loader項目，然后手動引入， 文件中對應(yīng)位置打上斷點，然后再 NPM SCRIPTS 面板對應(yīng)命令上點擊 debug 按鈕，就可以讓程序停止再斷點處，非常方便調(diào)試。
使用 chrome 瀏覽器調(diào)試
參考博客
首先再想要調(diào)試的地方添加代碼：debugger;
在項目根目錄下面運行命令：node-nightly --inspect ./node_modules/webpack/bin/webpack.js 命令的參數(shù)含義，可以查看該鏈接：https://nodejs.org/en/docs/inspector
然后再瀏覽器中打開：chrome://inspect 這個鏈接， 稍等一會兒，即可看到對應(yīng)的調(diào)試鏈接
點擊最下面的 inspect 鏈接按鈕， 即可跳轉(zhuǎn)到對應(yīng)的調(diào)試界面
本章源碼地址