(参考别人结合自己的整理得出,若有错误请大神指出)
Facebook 官方推出Create-React-App脚手架，基本可以零配置搭建基于webpack的React开发环境，内置了热更新等功能。
详细文档可前往链接：Create-React-App文档
本文将介绍使用Create-React-App脚手架搭建antd-mobile的开发环境。
快速开始：
npm install -g create-react-app /* 安装create-react-app，建议使用cnpm */ create-react-app myapp /* 使用命令创建应用，myapp为项目名称 */ cd myapp /* 进入目录，然后启动 */ npm start /*启动运行*/
按以上执行，即可快速创建一个React开发环境。
会自动打开默认浏览器 http://localhost:3000/
环境配置介绍：
一、项目结构：
生成项目后，脚手架为了“优雅”... ...隐藏了所有的webpack相关的配置文件，此时查看myapp文件夹目录，会发现找不到任何webpack配置文件。执行以下命令：
npm run eject
查看myapp 文件夹，可以看到完整的项目结构：
myapp/ node_modules/ /*这个是所有下载的依赖*/ package.json .gitignore config/ paths.js polyfills env.js webpack.config.dev.js webpack.config.prod.js public/ index.html /* 入口html文件 */ scripts/ <b>build.js</b> /*打包命令配置文件*/ <b>start.js</b> /*启动命令配置文件*/ test.js src/ App.js index.js /* 主入口文件 */
二、项目配置介绍
放上webpack 、npm 的充电传送门： 【webpack学习教程】
查看package.json文件的scripts，
"scripts": { "start": "node scripts/start.js", "build": "node scripts/build.js", },
可知，运行时是直接执行scripts文件目录下的js文件。
其中*start.js*为开发环境，*build.js*为打包脚本。
build.js 此处打包 生成的 文件 路径引用有问题
解决方法在另外一片文章中react.js - 基于create-react-app的打包后文件根路径修改
SASS、LESS等CSS预处理器配置
Facebook官方在create-react-app升级到某一版本，突然丢掉了默认对sass、less等预处理器的支持，官方文档说明
于是，只能自己动手，在config目录下，webpack.config.dev.js 和 webpack.config.prod.js文件，没有抽出 loader、postcss之类一般共用的配置，于是，在两个文件夹都要一起配置，也可以抽出共用部分，以便维护。
这里以webpack.config.dev.js举例，webpack.config.prod.js一样配置即可：
SASS-loader：
1、命令行，在当前目录执行：npm install sass-loader node-sass --save-dev
2、找到webpack.config.dev.js文件中 loaders中的第一项exclude（值为数组），排除scss文件，否则将被‘url-loader‘捕获。
{ exclude: [ /\.html$/, /\.(js|jsx)(\?.*)?$/, /\.css$/, /\.json$/, /\.svg$/, /\.scss$/ ....新增项! ]
3、loaders新增一项：
{ test: /\.scss$/, loader: ‘style!css!postcss!sass?outputStyle=expanded‘ },
至此，SASS文件就可以正常打包了（此处针对SCSS文件，如用到SASS，可将SCSS的正则修改下），LESS文件类似，不再赘述。
三、antd-mobile的引入及配置
在命令行执行：
npm install antd-mobile --save
移动端高清方案
因0.8以后的版本引入移动端高清方案，因此需要在webpack等增加相应配置，**必须配置！**，官方说明 按官方说明配置即可。
按需引入
为减少打包后体积以及方便书写，可用babel-plugin-import插件，配置后引入模块可如下：
import {Picker} from ‘antd-mobile‘;
自动引入CSS和JS，无需再引入整个antd-mobile的整个CSS文件
使用如下：
命令行执行：
npm install babel-plugin-import --save-dev
安装完毕后，在根目录新建文件，命名: .babelrc.js
{ "presets": [ "es2015", "react" ], "plugins": [ [ "import", { "libraryName": "antd-mobile", "style": "css" } ] ] }
在文件内输入以上内容，为babel的配置。
然后！！！最重要的一步，把package.json中的babel配置给删掉，尤其是：react-app！！！
webpack.config.dev.js和webpack.config.prod.js中，都需要为resolve的extensions新增一项‘.web.js‘
antd-mobile的web版的文件后缀为.web.js ...
四、杂项
React-Router版本
现在最新版本React-Router为4.x.x，与原用的2.x.x的API变化稍大（官方直接跳过了3...），如需使用2.x.x版本，可先卸载router,执行命令
pm remove react-router --save
然后在package.json中dependencies新增字段：
"react-router": "^2.0.0 < 3.0.0",
接着执行：
npm install
到这里，就算搭建完开发环境了，可以正常进行开发了。
大部分参考 :简书 邱鹏城, 如有转载请@出处
