怎么以index.html文件为入口文件进行打包？

Question

总的来说就是， 以html文件为入口， 自动寻找依赖的图片，css和js然后进行hash命名并打包。新的html文件的引用的图片css和js都会被改动成带有hash码的新的名字。

我有4个前端页面

里面内联了 图片 和 js(包括jquery)

和css（bootstrap）

我要打包成有hash加密并压缩的js和css

同时html文件也会被压缩， 图片也被压缩并把文件名进行hash加密，

就是为了减少浏览器的请求， 所有用到的js都打包成一个js文件, 所有用到的css打包成一个css文件，文件名都进行hash加密， 然后 html文件中自动化的调用这些个hash加密的js css 和 图片。

这样有hash加密的文件名就能进行版本控制， 方便前端静态页面的更新迭代， 只要页面上的代码改变了， 相应的代码文件名字的hash值也会不一样， 推送到服务器以后， 用户打开网页也不会因为缓存的问题而看不到最新的页面，不用ctrl+f5清除缓存。
（因为index.html文件名不进行hash加密，需要设置index.html等主页文件极低的缓存时间， 或者不缓存）

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

Answer 1

你这种比较传统的开发模式 也可以试试fis3

Answer 2

感觉是jquery不是全局变量的原因,
使用webpack中的plugins中使用ProvidePlugin这个插件进行全局变量注册,
这样写下试试

或者配置下

externals: {
"jquery" : "jQuery"
}