除錯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開發了一個小游戲，感興趣的朋友一個可以來玩玩
有喜歡聊技術朋友也歡迎入群，若二維碼失效可加我微信回復前端
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/176003.html
標籤：JavaScript