创建 dev 目录，npm init --yes 生成 package.json，确保安装 webpack webpack-dev-server
1. 安装配置 Babel
它是一个 JavaScript 编译器。使用它的目的有两个：
- 让代码支持 ES6 语法
- 支持 React 的一些特性（如 JSX 语法）
正好有两个 preset 可以完成这样的任务。
- babel-preset-es2015 语法包，有了它就可以随意使用 ES6 的新特性，const、箭头函数等
- babel-preset-react 语法包，它是专门用于 React 的优化，让你在代码中可以使用 React ES6 classes 的写法，同时直接支持 JSX 语法格式。
1.1 安装 Babel loader
loader 用于文件特定格式的转换
// 安装 babel-core 核心模块和 babel-loader
npm install babel-core babel-loader --save-dev
// 安装 ES6 和 React 支持
npm install babel-preset-es2015 babel-preset-react --save-dev
```
1.2 配置 .babelrc (可以在 webpack.config.js中配置)
安装完 Babel 和它的插件，配置一个它的规则，在项目的根目录新建一个 .babelrc 空文件。
// 告诉 Babel，编译 JavaScript 代码的时候要用这两个 presets 编译
{
'presets': ['es2015', 'react']
}
##### 2. 安装配置 ESLint（代码规范检查）
ESLint 代码检查工具，它的强大之处和 Babel 类似，提供一个**完全可以配置的检查规则**，而且提供了非常多的第三方 plugin，适合不同的开发场景，输出的错误信息也非常明晰，同时有着 ES6 语法的最佳支持，还支持 JSX 语法。
2.1 安装 ESLint loader
同样为 webpack 添加这个 loader，它应该是 preLoaders，在资源加载之前，先用 preLoaders 进行处理，代码检查肯定是要在代码转换之前进行的。
>```
npm insatll eslint eslint-loader --save-dev
ESLint 有许多配置好的格式插件，这里使用 Airbnb 配置合集 eslint-config-aribnb，这个配置合集里面还包括如下下面这三个插件
npm install eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y --save-dev
npm install eslint-config-airbnb --save-dev
2.2 配置 .eslintrc
和 Babel 类似，ESLint 也是通过配置文件来自定义它的检查规则的，在项目根目录下创建 .eslintrc 文件，写入如下代码：
>```
{
'extends': 'airbnb',
'rules': {
'comma-dangle': ['error', 'never']
}
}
3. 配置 webpack
配置好了 Babel 和 ESLint，使用 webpack 把它们整合。
安装 html-webpack-plugin：自动生成 HTML 页面，并自动引入正确的 JavaScript 依赖。
npm install webpack-webpack-plugin --save-dev
在项目根目录下创建 [webpack.config.js](https://github.com/GrandKai/dev/blob/master/webpack.config.js) 文件
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// const ROOT_PATH = path.resolve(__dirname);
const APP_PATH = path.resolve(__dirname, 'app');
const BUILD_PATH = path.resolve(__dirname, 'build');
module.exports = {
entry: {
app: path.resolve(APP_PATH, 'index.jsx')
},
output: {
filename: 'bundle.js',
path: BUILD_PATH
// publicPath: ''
},
module: {
rules: [
{
test: /.jsx$/,
loader: 'babel-loader',
options: {
// 添加 ES6， react 语法支持
presets: ['es2015', 'react'],
// 在开发环境才启用 HMR 和 Catch Error
env: {
development: {
presets: ['react-hmre']
}
}
},
include: APP_PATH
},
{
test: /\.jsx$/,
enforce: 'pre',
loader: 'eslint-loader',
// 发现以下配置的 options 未作用
options: {
extends: 'airbnb',
rules: {
indent: ['off'],
'comma-dangle': 2
}
},
include: APP_PATH
}
]
},
resolve: {
extensions: ['.js', '.jsx']
},
devServer: {
port: 8081
},
plugins: [
new HtmlWebpackPlugin({ title: 'use react app' })
]
};
这里添加了一个 resolve 参数，把 JSX 扩展名添加进去，这样就可以在 JS 中 import 加载 JSX 扩展名的脚本
##### 4. 添加测试页面
添加 react 库到项目中
>```
npm install react react-dom --save
在 app 目录下新建 index.jsx 文件,执行 npm run dev，打开浏览器 http://localhost:8081 查看运行效果
5. 添加组件热加载（HMR）功能
Babel 为我们做好了类似的工作，只需要安装 Babel 的 preset
npm install babel-preset-hmre --save-dev
这个 preset 里面其实包括两个方面。
- react-transform-hmr 用来实现上面所说的热加载;
- react-transform-catch-errors 用来捕获 render 里面的方法，并且直接展示在页面上。
配置见上面的 webpack.config.js
##### 6.总结
这里配置的 React + webpack2 开发环境，有如下特性：
- 支持 ES6 语言特性
- 支持 JSX 语法
- 支持 ESLint 作为代码检查工具
- 支持 HMR 热加载