本文适用于已經會使用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
https://nodejs.org/en/docs/inspector2. 打開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斷點了。