smart-react-webpack-boilerplate
基于 Egg + React + Webpack 多页面服务端渲染同构工程骨架项目
文档
特性
-
基于 React 多页面服务端客户端同构实现
-
支持 server 和 client 端代码修改, webpack时时编译和热更新,
npm start
一键启动应用 -
支持服务端渲染
render
和纯前端渲染renderClient
-
支持自动根据 jsx 文件构建 webpack entry 入口文件
-
easywebpack ^3.5.0 版本开始支持 webpack dll 自动化构建, 与多进程编译结合,构建速度减少 2/3
-
Node 8 版本的 async 和 await 特性, Controller 采用 class 方式编写
-
支持国际化多语言
依赖
- easywebpack ^3.5.3
- easywebpack-react ^3.5.0
- egg-view-react-ssr ^2.1.0
- egg-webpack ^2.4.6
- egg-webpack-react ^2.0.0
使用
安装cli
npm install easywebpack-cli -g
安装依赖
npm installnpm start
启动应用
npm start
应用访问: http://127.0.0.1:7001
配置说明
`config/config.local.js` const EasyWebpack = ;exportswebpack = webpackConfigList: EasyWebpack;
构建会同时启动两个webpack构建服务, 客户端js构建(build/client), 服务端构建(build/server), 默认端口9000, webpackConfigList 端口依次递增.
项目构建
// 直接运行npm start // 编译文件到磁盘打包使用npm run build 或者 easywebpack build prod
功能实现
多页面服务器渲染同构实现
编写jsx页面
在app/web/page 目录下面创建home目录, home.jsx, home.css文件.
- home.jsx 编写界面逻辑
;;;; { console; } { return <div> <Header></Header> <div className="main"> <div className="page-container page-component"> <List list=thispropslist></List> </div> </div> </div>; }
多页面后端实现
- 创建controller文件home.js
exports { ctx;};
- 添加路由配置
app;
前端渲染
- 创建controller的home.js 添加如下代码
exports { ctx;};
- 添加路由配置
app;