公司处于发展阶段,前后端结构不分离,项目需要后端渲染,SPA不给用。页面模板不好出。 老板东看一些布局,西看一些布局。能否快速修改模板以供版本迭代? JS不压缩影响加载速度?老式项目需要jQuery作为底层,如何全局部署供后台使用 针对迭代版本修改css能否快速进行压缩打包? 能否将js分为底层包、业务包、逻辑包分层打包实践? 能否将模板分为类似SPA组件式开发? ES6、ES7、ES8代码好用能不能给后台使用? 能否开发就打包解决浏览器缓存?实现修改即用?
只是主要解决不在SPA的环境,利用组件出渲染模板
脚手架参考vue-cli借鉴修改
底层调用bootstrap样式、jqueryDOM、让全局能访问到$ 故使将$挂载到window上面
使用express做开发环境实现热加载以便后续使用跨域请求代理
克隆项目
git clone https://github.com/hatedMe/webpack-multiple-pages.git
安装npm依赖包
npm install
开发环境 ===> 浏览器打开 localhost:4000
npm run dev
打包部署 ===> 根目录下dist为打包文件
npm run build
├── build // webpack配置文件
│ ├── server.js // 开发环境下入口文件
│ ├── webpack.base.config.js // webpack基本配置
│ ├── webpack.build.config.js // webpack打包配置
│ ├── webpack.build.dev.js // webpack开发环境配置
├── dist // 项目打包文件
├── src // 源码目录
│ ├── assets // 资源文件
│ │ ├── app.less // 业务全局css
│ ├── components // 组件文件
│ │ ├── head.ejs // 头部模板
│ │ ├── foot.ejs // 尾部模板
│ ├── views // 页面文件
│ │ ├── index // 首页文件
│ │ │ └── index.ejs // 首页模板文件
│ │ │ └── index.js // 首页入口文件
│ ├── main.js // 打包入口文件
│ ├── vendors.js // 业务包文件(底层js库打包)
├── static // 静态资源文件
使用技术栈:webpack + babel + less + ejs + express + node