安装webpack
webpack易于配置，与React配合简单易用，同时引用具有强大魔力的Babel，可以让我们轻松地用最新的标准编写React代码。
开始创建一个项目文件夹，用且用npm init --yes 命令生成一个 package.json 文件作为开始。然后确认是否安装了 webpack 和 webpack-dev-server。 我们通过以下命令进行安装：
npm install webpack webpack-dev-server -g 进行全局安装或者
npm install webpack webpack-dev-server --save-dev 直接作为项目依赖。
关于webpack的使用介绍，大家可以查看小编前几天的介绍的文章《JS基础一起学 | Webpack入门篇》。
安装配置Babel
Babel是一个JavaScript编译器，使用Babel的目的有两个，一个是让代码支持ES6语法，一个是支持React的一些特性（例如JSX语法）
安装Babel 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
配置 .babelrc
安装完Babel和它的插件，接下来在目录里新建一个 .babelrc的空文件。示例代码如下：
{
: [, ]
}安装配置 ESLint
在多人开发项目中，代码规范也是非常重要的，今天给大家推荐的是ESLint,它的强大之处和Babel有点相似，是可配置可检查规则的，而且提供了非常多的第三方插件，适合不同的开发场景，最值得一提的是支持ES6语法，还支持JSX语法，简直和React太搭啦!
安装 ESLint loader
npm install eslint eslint-loader --save-dev
//安装相关插件
npm install eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-ally --save-dev
npm install eslint-config-airbnb --save-dev
配置 .eslintrc
{
: ,
: {
: [, ]
}
} 配置 webpack
两大开发工具安装好后，我们现在就可以使用webpack把他们结合一起。这里我们需要在装一个webpack的插件-html-webpack-plugin,他可以帮助我们自动生成HTML页面，并且引入正确的JavaScript文件依赖。
npm install html-webpack-plugin --save-dev
在项目根目录里建一个webpack.config.js 文件
= require();
= require();
= require();
= .(__dirname);
= .(, );
= .(, );
.= {
: {
: .(, )
},
: {
: ,
: },
: ,
: {
: ,
: ,
: ,
: },
: {
: [, , ],
: },
: {
: [
{
: ,
: [],
: }
],
: [
{
: ,
: [],
: } ]
},
: [
({
: })
]
}npm可以添加自定义命令，将两条命令加到package.json里面，一个是运行webpack命令、Build整个项目，一个是启动本地的 webpack-dev-server来进行开发。
最终完成后的package.json文件如下：
{
: ,
: ,
: ,
: ,
: {
: ,
: },
: [],
: ,
: ,
: {
: ,
: ,
: ,
: ,
: ,
: ,
: ,
: ,
: ,
: ,
: ,
: ,
: ,
: },
: {
: ,
: }
} 添加测试页面
各项准备工作都完成了，我们添加一个测试页面 app.jsx ,看看是否能够正常运行，页面代码如下：
React from ;
ReactDOM from ;
App() {
(
Hello 前端达人
);
}
app = document.createElement();
document.body.appendChild(app);
ReactDOM.render(, app);接下来在项目根目录运行 npm run dev,大功告成，成功运行后就会看到运行后的效果，如下图：
添加组件热加载(HMR)功能
现在每次修改组件的代码，都会造成页面的刷新，如果更新代码后只更新局部组件，而不要求直接刷新，那不是更好？现在只要简单安装Babel的preset就可以轻松完成。
npm install babel-preset-react-hmre --save-dev
然后我们修改下 .babelrc 的配置，代码如下：
{
: [, ],
: {
: {
: []
}
}
}配置完毕，启动 npm run dev
接下来我们进行验证，随便修改H1标签的文字，发现页面没有刷新，但是内容改变了。
