webpack打包多html开发案例新
2018-07-31 22:33
519 查看
闲来无事在原来简单打包案例的基础上,参考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
本文结束。
相关文章推荐
- webpack打包多html开发案例
- [html]webpack网页开发打包工具
- webpack 打包后文件简单处理 HtmlWebpackPlugin
- webpack手动搭建 es6+less 开发环境和打包
- webpack开发vue2项目中的一些坑(1、跨域 2、打包后后端访问一片空白3、加载第三方库的字体文件出错4、加载背景图出错)
- webpack实现开发、测试、生产等环境的打包切换
- 基于打包工具Webpack进行项目开发
- webpack实现开发、测试、生产等环境的打包切换
- 【前端】Vue2全家桶案例《看漫画》之七、webpack插件开发——自动替换服务器API-URL
- 基于webpack的前端工程化开发解决方案探索(一):动态生成HTML
- 自己动手搭建React开发环境之四HTMLWebpackPlugin
- webpack配置:css文件打包、JS压缩打包和HTML文件发布
- 使用 React和webpack开发和打包发布
- webpack打包项目教程(还是遇到了打包后背景图片不显示的深坑以及html中的img不显示的问题,爬了一天多才豁然开朗)
- webpack打包去掉开发日志console.log
- Spring集成React用来开发前端----maven项目中用webpack打包react相关组件
- 优化单页面开发环境:webpack与react的运行时打包与热更新
- webpack配置开发环境(html-webpack-plugin、css-loader、less-loader、babel-loader)
- 基于webpack的前端工程化开发解决方案探索(一):动态生成HTML(转)
- 基于打包工具Webpack进行项目开发实例