Webpack 2 實作筆記 (5) — Webpack Dev Server Configuration

更多進階的 Webpack Dev Server 設定。

Webpack 2 with Webpack Dev Server Configuration

原本在 package.jsondev 是使用:

"dev" : "webpack -d --watch"

這個指令會去搜索 dist 資料夾,當 src/app.scss 變更,dist/app.css 就會變更。

後來改成:

"dev": "webpack-dev-server"

webpack-dev-server 是靠記憶體快取運作,所以變更 src/app.scssdist/app.css 不會跟著變,但如果重整瀏覽器可以看到變化。

可以利用 devServer 的選項做更多設定:

...
devServer: {
contentBase: path.join(__dirname, "dist"), // 要跑 server 的目錄
compress: true, // 用 gzip 壓縮檔案
stats: "errors-only", // 只輸出錯誤訊息
open: true // 第一次啟動會自動打開瀏覽器
},
...
Show your support

Clapping shows how much you appreciated Toumasaya’s story.