1. 編譯輸出進度帶顏色
webpack --progress --colors
2. 啟動監(jiān)聽模式
開啟監(jiān)聽模式后用狱,沒有變化的模塊會在編譯后緩存到內(nèi)存中幌羞,而不會每次都被重新編譯蠢涝,所以監(jiān)聽模式的整體速度是很快的爆存。
webpack --progress --colors --watch
3. 使用webpack-dev-server開發(fā)服務(wù)
它將在 localhost:8080 啟動一個 express 靜態(tài)資源 web 服務(wù)器株扛,并且會以監(jiān)聽模式自動運行 webpack养距,在瀏覽器打開http://localhost:8080/或http://localhost:8080/webpack-dev-server/可以瀏覽項目中的頁面和編譯后的資源輸出诉探,并且通過一個 socket.io 服務(wù)實時監(jiān)聽它們的變化并自動刷新頁面。
# 安裝
npm install webpack-dev-server -g
# 運行
webpack-dev-server --progress --colors
4. 打印錯誤詳情
webpack --display-error-details
5. resolve和resolveLoader 應(yīng)用
Webpack 的配置提供了resolve和resolveLoader參數(shù)來設(shè)置模塊解析的處理細節(jié)棍厌,resolve用來配置應(yīng)用層的模塊(要被打包的模塊)解析肾胯,resolveLoader用來配置loader模塊的解析。
當引入通過 npm 安裝的 node.js 模塊時耘纱,可能出現(xiàn)找不到依賴的錯誤敬肚。Node.js 模塊的依賴解析算法很簡單,是通過查看模塊的每一層父目錄中的node_modules文件夾來查詢依賴的束析。當出現(xiàn) Node.js 模塊依賴查找失敗的時候艳馒,可以嘗試設(shè)置resolve.fallback和resolveLoader.fallback來解決問題。
Webpack 中涉及路徑配置最好使用絕對路徑畸陡,建議通過path.resolve(__dirname, "app/folder")或path.join(__dirname, "app", "folder")的方式來配置鹰溜,以兼容 Windows 環(huán)境虽填。