react-spa-cli 简介
webpack3.4.1搭建react单页应用,脚手架 使用 react@15.6.1+webpack@3.4.1+es2015,都是当前最新版本,可以完整运行。
具有开发和生产两种模式。
使用方法
全局安装 react-spa-cli
npm install -g react-spa-cli
创建工程,并且换到新建目录下:
react-spa-cli my-project & cd my-project
安装依赖:
npm install
运行程序: 开发环境
npm start
生产环境
npm run build
基本功能
注意:在使用之前,强烈建议过一遍webpack3.4.1 中文指南
两种模式,基本功能点如下:
-
开发模式
- 热替换,保存刷新 webpack-dev-server
- react模块热替换react-hot-loader
- 自动生成index.html htmlwebpackplugin
- css module
- scss、autoprefixer
- code splitting
- 模块异步加载react-loadable
- 引入 antd-mobile
- 使用环境变量
- eslint
-
生产模式
- 自动生成index.html htmlwebpackplugin
- css module
- scss、autoprefixer
- code splitting
- 模块异步加载react-loadable
- 引入 antd-mobile
- 使用环境变量
- eslint
- 提取 CSSextract-text-webpack-plugin
- 资源打包压缩(UglifyJsPlugin)
- 缓存优化
- 引入CDN,减少打包体积externals
- 自动添加后缀[resolve.extensions]