調試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開發了一個小遊戲，感興趣的朋友一個可以來玩玩

有喜歡聊技術朋友也歡迎入羣，若二維碼失效可加我微信回覆前端