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