太久没更新文章了，这几个月说实话有很多可以写的，不过一直没抽出时间来码字。
最近在折腾React，因为之前用的Angular，React的写法一开始还有点不适应……
配置Webpack
npm init //初始化项目 npm install webpack --save-dev //安装webpack
在项目根目录新建一个webpack的配置文件webpack.config.js，并添加如下代码：
var webpack = require('webpack');
var path = require('path');
module.exports = {
entry:'./app/index.jsx', //入口文件
output:{
path:path.resolve(__dirname,'./build/'), //输出文件路径
filename:'bundle.js' //输出文件名
},
module:{
rules:[{
test:/\.jsx?$/,
loader:'babel-loader'
}]
},
resolve:{
extensions:['.js','.jsx']
}
}
创建入口文件
用npm安装react和react-dom。
npm install react react-dom --save
安好后在入口文件对应的位置创建文件/app/index.jsx，并添加如下代码：
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component{
render(){
return <h1>Hello React!</h1>
}
}
ReactDOM.render(<App></App>,document.getElementById('app'));
babel-loader配置
为了能让更多浏览器兼容，我们需要用babel-loader将ES6的代码转换为ES5。
首先安装对应的依赖包。
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
babel-preset-es2015和babel-preset-react是专门用来转换ES6和JSX语法的。
需要在根目录创建名为.babelrc的文件，并添加代码：
{
"presets": ["es2015","react"]
}
编译并在客户端运行
在根目录创建index.html，添加代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="build/bundle.js"></script>
</body>
</html>
接下来用webpack的命令编译代码：
webpack -d //编译为source map，方便调试
成功的话，根目录下会多出build文件夹及子文件bundle.js，打开index.html就会看见Hello React!
至此的文件目录结构如下：
根目录 | ├ app ┐ | index.jsx //入口文件 | ├ build ┐ | bundle.js //编译后文件 | ├ node_modules ┐ | ... | ├ .babelrc //babel-loader配置文件 | ├ index.html | ├ package.json | └ webpack.config.js //webpack配置文件
总结
文章内主要写了webpack2 + react es6的配置方法，更详细的说明可以参照官方文档。