webpack打包多html开发案例新

闲来无事在原来简单打包案例的基础上,参考vue-cli的打包代码,改为多文件打包。

区别于上篇文章《webpack打包多html开发案例》,此次打包根据开发的不同环节进行打包,也就是有开发阶段的打包和devServer代码。

也有build阶段的代码。

同时在具体的功能上,除了实现了多文件的打包。还具备以下功能。

1)base64图片使用功能:当图片小于一定尺寸转为base64减少http请求。

2)可以进行公共模块的抽取,统一打包到vender之中,当然前提是有vender这个入口。

3)可以选择性的将css独立打包或者直接放在html文件中。

4)css可以使用各种预处理器,同时自动完成前缀。

5)同时在dev下自动刷新网页。

6)可以独立开发插件和组件

7)实现代码的增量式更新

整体就是这样。

具体代码可以从github上面直接下载。直达链接:https://github.com/mstzhen/webpack-mangPage

本文结束。