調試webpack
- 2019 年 11 月 6 日
- 筆記
調試webpack
1. 摘要
用過構建工具webpack的朋友應該都體會，面對其幾百行的配置內容如大海一小舟，找不到邊。看文檔查百度，對其構建的生命周期看了又看。最終還是很茫然。原因很簡單，構建配置一般都是通過腳手架工具自動生成。看似每天在用，其實接觸很少。直到有一天，發現社區的插件不能滿足需求時，相信你一定會訂製一個自己的插件。這時你需要徹底了解它的機制，作為開發，調試程式碼一定是了解內部邏輯最好的方法。原文公眾號地址
不管是 npm 還是 webpack 都是基於nodejs的工具。所以最終是調試node。這裡我介紹三種調試的方法。需要提前準備好以下工具
- vscode
- google chrome
使用npm初始一個項目命名為webpacktest。需要源碼的朋友可關注公眾號小院不小,回復 webpackdebug。安裝項目依賴
npm i -D webpack webpack-cli添加webpack配置文件,並在其中使用debugger設置一個斷點。
const path = require('path'); debugger; module.exports = { mode: 'development', entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: "index.js" } };2. (方法一)使用vscode運行npm調試
在新建項目的package.json文件scripts項中添加一個key為debug的配置，內容如下
... "scripts": { "build": "webpack", "debug": "node --inspect-brk=5858 ./node_modules/webpack/bin/webpack" } ...vscode中選擇調頁簽，在左上角調試的下拉框中選擇添加配置，選擇Node環境。vscode會自動生成一個 launch.json 文件，將文件的內容調整為以下內容
{ "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "build", "stopOnEntry": true, "runtimeExecutable": "npm", "runtimeArgs": [ "run", "debug" ], "port": 5858 } ] }其中埠配置需要和inspect-brk配置的埠保持一致。stopOnEntry表示在運行的第一行程式碼中添加斷點,點擊開始調試按鈕，即可進入如下介面
繼續點擊運行，即可進入配置文件設置的斷點
其中左邊的小紅點是，直接在vscode中添加的斷點。此斷點也可中斷。
3. (方法二)使用vscode運行node調試
我們細看在package.js文件中配置的調試腳本，其實是運行node，所以就想是否可以不通過npm直接運行。經過測試，確實是可以的。回到我們launch.json文件，將配置文件改為如下
{ "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "Node", "stopOnEntry": true, "program": "${workspaceFolder}/node_modules/webpack/bin/webpack" } ] }點擊開始調試, 依然可得到方法一中一樣的調試結果。通過這種方式，沒有package.json文件的約束。更簡單也減少了錯誤的幾率。
4. (方法三)命令行結合Chrome調試
在命令行中輸入命令 node --inspect-brk ./node_modules/webpack/bin/webpack，為了方便，我們這還是使用vscode，運行效果如下
打開chrome瀏覽器，在地址欄輸入 chrome://inspect/#devices,在介面中點擊inspect,此時熟悉的介面就出來了，和平時調試前端一樣。顯示如下
點擊後，便可進入斷點，如下
在點擊下調試按鈕，可進入我們在配置文件中設置的斷點
5. 總結
在以前就配置過調試webpack,時間久了就忘了，這次突然有需求了又查了好久資料。想想了想，還是總結分享出來。做開發，每天接觸的多，還是要多寫。
若仔細看文章的朋友，所謂三個方法都是圍繞命令 node --inspect-brk ./node_modules/webpack/bin/webpack .我在查詢資料時，最初得到的命令是 node --inspect-brk ./node_modules/.bin/webpack,這命令會出現錯誤。
歡迎感興趣的朋友關注我的微信訂閱號"小院不小"，或者點擊下方的二維碼關注。我將多年開發中遇到的難點，以及一些有意思的功能，體會都會一一發布到我的訂閱號中。需要本文demo可以在公眾號中回復webpackdebug
閑來無事，採用cocos creator開發了一個小遊戲，感興趣的朋友一個可以來玩玩
有喜歡聊技術朋友也歡迎入群，若二維碼失效可加我微信回復前端
