鍍金池/ 問答/HTML/ 怎么以index.html文件為入口文件進行打包？

怎么以index.html文件為入口文件進行打包？

總的來說就是， 以html文件為入口， 自動尋找依賴的圖片，css和js然后進行hash命名并打包。新的html文件的引用的圖片css和js都會被改動成帶有hash碼的新的名字。

我有4個前端頁面

clipboard.png

里面內(nèi)聯(lián)了 圖片 和 js(包括jquery)

clipboard.png

和css（bootstrap）

clipboard.png

我要打包成有hash加密并壓縮的js和css

clipboard.png

clipboard.png

同時html文件也會被壓縮， 圖片也被壓縮并把文件名進行hash加密，

clipboard.png

就是為了減少瀏覽器的請求， 所有用到的js都打包成一個js文件, 所有用到的css打包成一個css文件，文件名都進行hash加密， 然后 html文件中自動化的調(diào)用這些個hash加密的js css 和 圖片。

clipboard.png

clipboard.png

clipboard.png

這樣有hash加密的文件名就能進行版本控制， 方便前端靜態(tài)頁面的更新迭代， 只要頁面上的代碼改變了， 相應(yīng)的代碼文件名字的hash值也會不一樣， 推送到服務(wù)器以后， 用戶打開網(wǎng)頁也不會因為緩存的問題而看不到最新的頁面，不用ctrl+f5清除緩存。
（因為index.html文件名不進行hash加密，需要設(shè)置index.html等主頁文件極低的緩存時間， 或者不緩存）

那么gulp或者webpack哪個能完成？

回答
編輯回答
熊出沒

你這種比較傳統(tǒng)的開發(fā)模式 也可以試試fis3

2018年9月3日 12:10
編輯回答
乖乖噠

感覺是jquery不是全局變量的原因,
使用webpack中的plugins中使用ProvidePlugin這個插件進行全局變量注冊,
這樣寫下試試

clipboard.png
或者配置下

externals: {
"jquery" : "jQuery"
}
2017年7月29日 11:28