1. 项目初始化
1.1 通过 easywebpack-cli 脚手架初始化
安装脚手架
npm install easywebpack-cli -g
命令行,然后就可以使用easywebpack
或easy
命令命令行运行
easywebpack init
选择 egg+vue server side render boilerplate 初始化骨架项目
安装依赖
npm install
1.2 通过骨架项目初始化
git clone https://github.com/hubcarl/egg-vue-webpack-boilerplate.git
npm install
初始化的项目提供多页面和SPA(vue-router/axios)服务端渲染实例,可以直接运行。
2. 项目运行
2.1 本地运行
npm start
npm start 做了如下三件事情
- 启动 egg 应用
- 启动 Webpack 构建, 文件不落地磁盘,构建的文件都在内存里面(只在本地启动, 发布模式是提前构建好文件到磁盘)
- 构建会同时启动两个 Webpack 构建服务, 客户端js构建端口9000, 服务端端口9001
- 构建完成,Egg应用正式可用,自动打开浏览器
2.2 发布模式
- 构建文件落地磁盘
npm run build 或 easywebpack build prod
- 启动 Webpack 构建,文件落地磁盘
- 服务端构建的文件放到
app/view
目录 - 客户端构建的文件放到
public
目录 - 生成的
buildConfig.json
和manifest.json
放到config
目录 构建的文件都是gitignore的,部署时请注意把这些文件打包进去
- 运行
启动应用前, 请设置 EGG_SERVER_ENV
环境变量,测试环境设置 test
, 正式环境设置 prod
npm start
3. 项目构建
通过
easywebpack-cli
统一构建,支持 dev,test,prod 模式构建easywebpack-cli
通过项目根目录下的webpack.config.js
配置文件构造出 Webpack 实际的配置文件,配置项请见 webpack.config.js- 获取 Webpack 实际的配置文件, egg-webpack 会使用到该功能。构建会根据
webpackConfigList.length
启动对应个数的 Webpack 编译实例,这里会同时启动两个 Webpack 构建服务, 客户端jsbundle构建,端口9000, 服务端jsbundle构建端口9001。默认端口为9000, 端口依次递增。
// config/config