本项目的主要目的是展示如何使用 Egg + Webpack 搭建一套前后端统一的开发环境,主要包括:
- 后端 Node.js 使用 Egg 框架
- 前端使用基于 webpack 的工作流,与具体框架无关(本项目使用 react 做演示)
- 开发过程中无需分别启动前端与后端应用(基于 egg-webpack)
- clone 本项目
git clone https://github.com/keenwon/Egg-Webpack-Starter.git
- 本地开发
npm run dev
- 执行测试 & lint
npm test
- 应用部署
# 构建前端静态资源
npm run build
# 启动应用
npm start
# 停止应用
npm stop
.
├── app # 服务端代码
│ ├── controller # egg controller
│ ├── public # 静态资源目录
│ │ └── static # 前端 build 输出
│ └── view # egg view
├── client # 客户端代码
│ ├── build # webpack config
│ └── src # 客户端源码
│ └── views
├── config # egg config
本节详细讲述整个搭建过程,如果你只是想简单使用,请参考前面的“快速使用”
首先,你得有个一 egg 应用,具体可以查看官方文档,此处不再赘述。
我们使用 egg-webpack 实现基于 egg 的 webpack 编译和热更新。关于 egg-webpack 的更多内容可以看这里。
npm install egg-webpack --save-dev
启用 plugin:
// 仅需 local 环境
// {root}/config/plugin.local.js
exports.webpack = {
enable: true,
package: "egg-webpack"
}
配置端口和 webpack config file:
// {root}/config/config.local.js
exports.webpack = {
port: 9000,
webpackConfigList: [require("../webpack.config")]
}
这里指定 9000
端口,后面会用到。
安装 webpack-hot-middleware
:
npm i webpack-hot-middleware --save-dev
配置 webpack.dev.js
:
module.exports = {
// ...
entry: {
app: [
// 注意端口和前面设置的一致
"webpack-hot-middleware/client?path=http://127.0.0.1:9000/__webpack_hmr&reload=true",
"../src/index.js"
]
},
plugins: [new webpack.HotModuleReplacementPlugin()]
// ...
}
添加 react-hot-loader
(其他框架同理):
// babel.config.js
module.exports = {
// ...
plugins: ["react-hot-loader/babel"]
// ...
}
修改入口组件,使用 react-hot-loader
提供的 hoc:
import React from "react"
import {hot} from "react-hot-loader/root"
const App = () => <div>App</div>
export default hot(App)
这里使用 handlebar 模板,开发模式写死就好了, 生产环境读取 manifest
:
eslint 和其他包都可能依赖 acorn,会造成冲突,具体查看 eslint/js#393
MIT.