最近也开始学习React开发，发现Es6的写法相对于Es5更加简洁实用，并且更符合JavaScript的一些格式风格，所以尝试一下ES6写法
webpack构建
首先在建立一个项目
app下是项目开发路径
components是组件路径
build下是打包路径
建立好项目之后 首先是安装webpack
在doc下 输入
npm install -g webpack
出现这样的展示 证明已经安装成功
接下来在项目中打开doc生成package.json文件
输入命令
npm init
出现以下内容就是在配置json 名字输入要英文的不然会出错，接下来一路回车OK 知道出现选择yes位置 填写yes然后回车
之后显目中就会出现一个文件 package.json
下面在项目中安装webpack
npm install --save-dev webpack
安装完成之后项目会多出一个文件夹
并且package.json文件中会出现webpack相关配置信息
创建webpack.config.js
module.exports = {//注意这里是exports不是export
entry: __dirname + "/app/index.js",//唯一入口文件，就像Java中的main方法
output: {//输出目录
path: __dirname + "/build",//打包后的js文件存放的地方
filename: "bundle.js"//打包后的js文件名
}
};
此刻已经可以通过webpack在命令行中 进行打包了
打包文件会生成到build中
安装React
在终端输入npm install --save-dev react react-dom同时安装React和React-DOM
安装完成后 node_modules下会多出来
证明安装成功
下面需要安装babel 将React的jsx语法转换成浏览器能够识别的语法 此过程比较慢
用npm一次性安装这些依赖包npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
安装后会出现这些文件夹证明安装成功
Babel其实可以完全在webpack.config.js中进行配置
但是考虑到babel具有非常多的配置选项，在单一的webpack.config.js文件中进行配置往往使得这个文件显得太复杂，因此一些开发者支持把babel的配置选项放在一个单独的名为 ".babelrc" 的配置文件中。
我们现在的babel的配置并不算复杂，不过之后我们会再加一些东西，因此现在我们就提取出相关部分，分两个配置文件进行配置（webpack会自动调用.babelrc里的babel配置选项），如下：
module.exports = {//注意这里是exports不是export
devtool: ‘eval-source-map‘,//生成Source Maps,这里选择eval-source-map
entry: __dirname + "/app/index.js",//唯一入口文件，就像Java中的main方法
output: {//输出目录
path: __dirname + "/build",//打包后的js文件存放的地方
filename: "bundle.js"//打包后的js文件名
}
module: {
//loaders加载器
loaders: [
{
test: /\.(js|jsx)$/,//一个匹配loaders所处理的文件的拓展名的正则表达式，这里用来匹配js和jsx文件（必须）
exclude: /node_modules/,//屏蔽不需要处理的文件（文件夹）（可选）
loader: ‘babel-loader‘//loader的名称（必须）
}
]
}
};
在项目根目录下新建.babelrc文件，没错你没看错，就是只有后缀名的文件，添加如下代码：
//.babelrc
{
"presets": [
"react",
"es2015"
]
}
这时候就配置完成了 可以使用jsx和es6语法了
打包时候 只输入npm start就可以打包了
原文：http://www.cnblogs.com/youtx/p/6484701.html