公司处于发展阶段,前后端结构不分离,项目需要后端渲染,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