在线演示https://jeromehan.github.io/w...基于webpack搭建纯静态页面类型前端工程方案模板按需加载模块,按需加载进行懒加载,在实际使用某些模块时增量更新多入口文件,自动扫描入口。同时支持SPA和多页项目。静态资源根据需要自动注入HTML,可以自动添加哈希值。支持js、css、scss等代码检查、打包、压缩混淆、图片转base64等常用lib组件。打包,生成通用的bundle文件函数标识,根据开发/测试环境和生产环境进行不同配置的打包。支持自动部署、打包和发布。远程服务器支持组件化开发(使用ejs模板方式)为什么要用webpack?它类似于browserify,但它可以将您的应用程序拆分为多个文件。如果你的单页应用程序有很多页面,用户只会下载他们当前访问的页面的代码。当他们访问应用程序中的其他页面时,他们不再需要加载与上一个页面相同的公共代码。它可以替代gulp和grunt,因为它可以构建打包的css、预处理css、编译js和图像等。它支持AMD和CommonJS,以及其他模块系统(Angular、ES6)。如果您不熟悉如何使用它,只需使用CommonJS。环境Node.js复制项目模板$gitclonehttps://github.com/jeromehan/webpack-jquery.git安装依赖$cdwebpack-jquery$npminstall目录结构。├──package.json#项目配置├──README.md#项目描述├──src#源码目录│├──index.ejs#首页│├──pageA.html#页面A│├──css/#css资源│├──img/#图片资源│├──js#js&jsx资源││├──index.js#首页入口│├──pageA.js#页面A入口││├──lib/#npm中没有存储第三方库或下载到本地基础库,如jQuery、Zepto、React等├──webpack.config.allinone.js#webpack配置├──webpack.config.js#官方环境webpack配置入口└──webpack-dev.config.js#开发环境webpack配置入口开发需求同意/src/*.html为应用的入口文件,必须有一个js文件与与/src/js/一级目录下的文件入口同名。编译(测试/开发环境)$npmrundev编译(生产环境)生产环境会对js进行混淆压缩,压缩css、html、字符替换等$npmrunbuild
