react-spa-cli 简介

webpack3.4.1搭建react单页应用，脚手架 使用 [email protected][email protected]+es2015，都是当前最新版本，可以完整运行。

具有开发和生产两种模式。

使用方法

全局安装 react-spa-cli

npm install -g react-spa-cli

创建工程，并且换到新建目录下：

react-spa-cli my-project & cd my-project

安装依赖：

npm install

运行程序：

开发环境

npm start

然后在浏览器中输入：http://localhost:3000/，就能看到页面啦。

生产环境

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]