构建react应用，使用es6风格写法是最合适的。所以要使用babel进行编译，而且由于react的jsx语法自成一套，所以解析标准要包含es2015和react
webpack部分
模块依赖：
babel模块：
babel-core
babel-loader
babel-preset-es2015
babel-preset-react
css、less、img url 加载模块:
css-loader
less-loader
style-loader
url-loader
react模块:
react
react-dom
react-router // react路由
react-addons-css-transition-group // 动画过渡
webpack中的实用插件：
1.js代码压缩优化插件: webpack.optimize.UglifyJsPlugin
在开发模式下使用react的时候, react会给出很多友好的提示，以及给出各种调试信息，而且文件没有压缩，十分巨大，而使用其他的方式进行压缩时，react-dom还会给出警告，所以可以直接使用webpack的插件进行压缩
// js代码压缩优化
var UglifyJs = new webpack.optimize.UglifyJsPlugin({
output: {
comments: false,
},
compress: {
warnings: false
}
});
2.css代码单独打包出去:
// css单独打包插件
var ExtractTextPlugin = require('extract-text-webpack-plugin');
- 定义开发环境，让开发环境与node环境关联起来：
// 开启生产环境模式, 启动时要通过NODE_ENV=production来启动
var Define = new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development'),
}
});
备注： 这样关联起来之后, 在发布生产环境代码的时候，就应该这样调用:
NODE_ENV=production webpack
react部分
react推崇组件化开发, 所以可以把页面中的一切都组件化起来，由于配合了webpack分析模块依赖，所以不仅js可以模块化，css甚至img也可以模块化，把一个功能所需的视图、css、js、img、单独管理起来，就可以很好地做成一个组件了。
所以我的项目目录里有个widget文件夹(也可以叫component)， 文件夹的结构如下:
widget
--- 导航组件(NavBox)
|导航组件jsx
|导航组件less
--- 轮播组件(SlideBox)
|轮播组件jsx
|轮播组件less
然后是使用react-router
react-router是一个很大的东西，建议直接查看相关的官方文档
