webpack打包過程如何除錯?

2022-06-23 05:21:14 字數 864 閱讀 3538

本文適用於已經會使用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 減小...