webpack打包過程如何除錯？

本文適用於已經會使用webpack的前端開發人員，但是想進一步瞭解webpack細節和進階。

首先請讀者按照我前一篇文章  Webpack 10分鐘入門介紹的步驟，在本地搭建一個webpack的hello world專案。

搭好之後的專案結構如下圖：

開啟index.html能看到Hello World字串。

下面介紹如何除錯webpack本身的打包過程。

假設我們的需求是想除錯專案資料夾下的webpack配置檔案：webpack.config.js

那麼我們在裡面設定一個斷點：

1. 在當前webpack專案工程資料夾下面，執行命令列：

node --inspect-brk ./node_modules/webpack/bin/webpack.js --inline --progress

其中引數--inspect-brk就是以除錯模式啟動node：

會觀察到輸出：

Debugger listening on  ws://127.0.0.1:9229/19421955-0f12-44c7-95da-fa5dd8384e04

For help see 

2. 開啟Chrome瀏覽器，位址列裡輸入 chrome://inspect/#devices ：

在彈出視窗點選超連結"Open Dedicated DevTools for Node.

此時在第一步的命令列視窗裡，出現一行新的提示資訊：debugger attached。

Chrome視窗彈出來了，斷點停留在webpack.js第一行處。這個webpack.js就是我們之前命令列裡指定的引數：node --inspect-brk ./node_modules/webpack/bin/webpack.js --inline --progress

然後點一下Chrome偵錯程式裡的“繼續執行”，斷點就提留在我們設定在webpack.config.js裡的debugger斷點了。