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

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