調試webpack 1. 摘要 用過構建工具webpack的朋友應該都體會，面對其幾百行的配置內容如大海一小舟，找不到邊。看文檔查百度，對其構建的生命周期看了又看。最終還是很茫然。原因很簡單，構建配置一般都是通過腳手架工具自動生成。看似每天在用，其實接觸很少。直到有一天，發現社區的插件不能滿足需求時 ...
調試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開發了一個小游戲，感興趣的朋友一個可以來玩玩
有喜歡聊技術朋友也歡迎入群，若二維碼失效可加我微信回覆前端
