开箱即用,容易理解,更适合小白使用开发学习
已支持:
- mobx ———— mobx进行状态管理
- React-router-dom ———— React路由体系
- Antd ———— 使用antd学习开发后台管理系统
- React-loadable ———— import()动态加载的支持
- webpack打包优化 ———— build包更小
- fetch ———— 数据请求 可另行安装axios
- Scss ———— css 预处理
- 登录验证
- 支持装载ES7(装饰器)
- Express
- Webpack 4.0
- create-react-app 2.0
- 文件 gzip ———— compression
即将支持:
- IE兼容
- 接口
- nginx
- typescript
install
yarn install
or npm install
npm install yarn -g
start
yarn start
默认端口:3000
webpack proxy
转发可以直接配置package.json中的proxy
yarn start --PORT 3000
build
yarn build
- 新增方法
+ function resolve (dir) {
+ return path.join(__dirname, '..', dir)
+ }
- resolve -> alias 新增
+ '@':resolve('src'),
- externals externals 配置选项提供了「从输出的 bundle 中排除依赖」的方法。
+ externals: {
+ 'react': 'React',
+ 'react-dom': 'ReactDOM',
+ 'mobx' : 'mobx',
+ 'react-router-dom':'ReactRouterDOM',
+ 'mobx-react':'mobxReact',
+ 'moment':'moment',
+ 'antd' : 'antd',
+ },
- devtool 此选项控制是否生成,以及如何生成 source map。
- devtool: shouldUseSourceMap ? 'source-map' : false,
+ devtool: false
如果你有单独的后端开发服务器 API,并且希望在同域名下发送 API 请求 ,那么代理某些 URL 会很有用
+ "proxy":{}
HtmlWebpackPlugin 你可以让插件为你生成一个HTML文件,使用lodash模板提供你自己的模板,或使用你自己的loader。
+ <%if(process.env.NODE_ENV === 'production') {%>
+ <script src="%PUBLIC_URL%/lib/react.production.min.js"></script>
+ <script src="%PUBLIC_URL%/lib/react-dom.production.min.js"></script>
+ <script src="%PUBLIC_URL%/lib/react-router-dom.min.js"></script>
+ <script src="%PUBLIC_URL%/lib/mobx.umd.min.js"></script>
+ <script src="%PUBLIC_URL%/lib/mobx-react.min.js"></script>
+ <script src="%PUBLIC_URL%/lib/moment.min.js"></script>
+ <script src="%PUBLIC_URL%/lib/antd.min.js"></script>
+ <%}%>
const path = require('path')
const express = require('express')
var app = express()
// 静态文件资源,做静态文件服务器,js、css、html资源等
const projPath = process.cwd()
// js,css资源
app.use( `/` , express.static( path.join(projPath, 'build') ) )
app.get( `*` , ( req , res ) => res.sendFile(path.join(__dirname, 'build', 'index.html')) )
// 修改侦听服务器端口
const port = 2001
app.listen(port)
console.info(`Listen on Port ${port}`)
blog address : https://www.wulibaibao.com/
####简书地址:
https://www.jianshu.com/u/bc0ac5b86f32
联系我! QQ :381477703