如何使用Webpack-dev-server和HTML-webpack-plugin將.html輸出到磁盤

Question

我使用webpack和html-webpack-plugin來使用生成的腳本包（如bundle.[hash].js）更新我的index.html文件。

然後，我必須運行webpack-dev-server，以便我可以將該軟件包加載到內存中並利用熱模塊更換。

這使得代碼編譯兩次。

不過，我想是webpack-dev-server也能夠更新爲新bundle.[hash].js index.html文件，因爲現在我要運行webpack隨後webpack-dev-sever。編譯兩次似乎很奇怪。

同樣，我運行webpack的唯一原因是讓我的index.html文件更新爲捆綁的新散列。如果我能得到webpack-dev-server以將更新的index.html輸出到磁盤，那麼我可以放棄webpack命令。

這可能嗎？如果是這樣，webpack配置會發生什麼變化？我的webpack配置非常長，所以我不認爲這有助於在這裏發佈。

Answer 1

webpack-dev-server將存儲在內存中的編譯包，而不會寫束輸出中的目錄，所以我想用webpack-dev-server當你不需要在包名稱添加[hash]，

，你可以有三個webpack配置文件，說webpack.common.js,webpack.dev.js和webpack.prod.js。

webpack.common.js包含能夠與其它構造，通過使用webpack-merge

webpack.dev.js用於webpack-dev-server合併常見的配置，並輸出文件名應爲bundle.js

webpack.prod.js用於生產，輸出文件名應該是bundle.[hash].js

那麼你可以簡單地運行webpack-dev-server webpack.dev.js

Answer 2

我認爲這正是你所需要的：https://github.com/jantimon/html-webpack-harddisk-plugin

webpack-dev-server保存在內存中更新的HTML。有了這個插件，它也會將它寫入文件系統。