webpack如何恰當的處理manifest中的runtime部分

請教一下 webpack 的runtime內聯到html會導致所有的html都發(fā)生變化這個怎么解決呢？如果不內聯，生成json文件，又如何去引入比較好呢?

如何恰當的處理manifest中的runtime部分：

{"0":"js/0.840dc3db.js","common":"js/common.50055e90.js","detail":"js/detail.dd333b62.js","guide":"js/guide.c4b3b04b.js","income":"js/income.44979f51.js","index":"js/index.fdb1e05e.js","recharge":"js/recharge.27970e83.js","room":"js/room.c000bd07.js","test":"js/test.eccd512f.js"}

commonchunkplugin 可以生產manifest文件，內含runtime，的確是這樣。但是，如果生成manifest.78sd89dsds.js形式，每次編譯manifest文件都會變得，進而導致所有的html都會發(fā)生變化。如果生成manifest.js形式，html引入manifest.js就會有緩存

如果，用其他插件比如inline-chunk-manifest-html-webpack-plugin，可以把runtime內聯到html，但這樣依然會導致每次編譯后，改動一個js，所有的html都會變化

如何做到修改某一個文件，無關的html不發(fā)生變化呢

回答

編輯回答

老梗

@KingMario @lisfan 目前找到了問題的根源，造成我這種困擾的原因是我在本地磁盤進行了編譯，然后提交src和編譯后的文件，導致要提交的內容有很多是沒有改動的html。其實不應該提交編譯后的文件，應該只提交src文件到測試或者線上，然后在測試服務器或者線上服務器再進行編譯，把編譯工作放在服務器端即可。目前正在研究jenkins+gitlab的持續(xù)集成解決方案。感謝二位的回答！

2018年5月26日 18:04

編輯回答

款爺

我的做法是

使用commonchunkplugin將runtime獨立抽出成一個js文件，這個js文件是肯定會每次變化的，它內部會更新manifest，對應資源與加了hash版本后的對應關系
使用NamedModulesPlugin或HashedModuleIdsPlugin，讓依賴模塊的打包不以引用順序，而是以一個具體的標識來判斷依賴模塊是否發(fā)生變化，來避免其他未改動的模塊版本hash產生變化

2018年5月12日 01:02

編輯回答

替身

用 commonchunkplugin 即可。

使用 commonchunkplugin 生成 manifest 文件的目的就是充分利用緩存啊，你可以多次使用 commonChunkPlugin 來使得發(fā)生變化的文件最少、影響最小，如將 vender 單獨打包，將每個功能模塊的文件單獨打包，以及，如果是多頁面應用（非 SPA），還可以使用 webpack 多 entry 等。

另外，由于 html 文件名一般不會變化，你還需要在服務器上設置與緩存相關的 HTTP 響應頭，使得該文件的變化能盡可能快地刷新到客戶端。

2017年11月1日 21:26