鍍金池/ 問答/HTML/ webpack如何恰當?shù)奶幚韒anifest中的runtime部分

webpack如何恰當?shù)奶幚韒anifest中的runtime部分

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

如何恰當?shù)奶幚韒anifest中的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 可以生產(chǎn)manifest文件,內(nèi)含runtime,的確是這樣。但是,如果生成manifest.78sd89dsds.js形式,每次編譯manifest文件都會變得,進而導致所有的html都會發(fā)生變化。如果生成manifest.js形式,html引入manifest.js就會有緩存

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

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

回答
編輯回答
老梗

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

2018年5月26日 18:04
編輯回答
款爺

我的做法是

  1. 使用commonchunkplugin將runtime獨立抽出成一個js文件,這個js文件是肯定會每次變化的,它內(nèi)部會更新manifest,對應(yīng)資源與加了hash版本后的對應(yīng)關(guān)系
  2. 使用NamedModulesPluginHashedModuleIdsPlugin,讓依賴模塊的打包不以引用順序,而是以一個具體的標識來判斷依賴模塊是否發(fā)生變化,來避免其他未改動的模塊版本hash產(chǎn)生變化
2018年5月12日 01:02
編輯回答
替身

用 commonchunkplugin 即可。

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

另外,由于 html 文件名一般不會變化,你還需要在服務(wù)器上設(shè)置與緩存相關(guān)的 HTTP 響應(yīng)頭,使得該文件的變化能盡可能快地刷新到客戶端。

2017年11月1日 21:26