本文適用於已經會使用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:
for help see nodejs.org/en/docs/ins…
在彈出視窗點選超連結"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斷點了。
webpack打包js除錯配置
webpack打包js除錯配置 webpack打包js 會將很多的js檔案打包到乙個檔案中，當出現錯誤時，如何在瀏覽器控制台，找到出錯的位置呢？接著之前的來看，首先故意將print.js列印寫錯 執行webpack，由於我修改了package.js 現在需要執行 執行結果同 現在檢視控制台 發現報錯...
webpack打包快取 webpack打包效能分析
webpack提供的uglifyjs外掛程式由於採用單執行緒壓縮，速度很慢 webpack parallel uglify plugin外掛程式可以並行執行uglifyjs外掛程式，這可以有效減少構建時間，當然，該外掛程式應用於生產環境而非開發環境，配置如下 var paralleluglifypl...
webpack打包快取 webpack打包優化探索
雖然webpack的已經公升級到了webpack4，而我們目前還在使用 webpack3，但其中的優化點都大同小異，公升級後同樣適用。效能優化初步原則 這三條原則永遠是一切優化的前提 優化配置 公升級webpack 3，優化js的編譯能力 scope hoisting 1performance 減小...