本文介绍了React + webpack 环境配置的方法步骤，分享给大家，具体如下：
安装配置Babel
babel-preset-es2015 ES6语法包，使代码可以随意地使用ES6的新特性。
babel-preset-react React语法包，专门用于React的优化，在代码中可以使用React ES6 classes的写法，同时直接支持JSX语法格式
安装Babel loader
// 安装ES6 和 React 支持
npm install babel-preset-es2015 babel-preset-react --save-dev
npm install babel-preset-es2015 babel-preset-react --save-dev
配置 .babelrc
安装完Babel和它的插件，配置一下它的规则，在根目录下新建一个.babelrc空文件：
代码的时候要用这两个presets编译
{
"preset": ["es2015","react”]
}
安装配置ESLint
安装ESLint loader
为webpack添加这个preLoaders（在loader处理资源之前，先用preLoaders进行处理，代码检查在代码转换之前进行）
这里使用Airbnb开发配置合集eslint-config-airbnb，这个配置合集里面还包括以下3个插件：
npm install eslint-config-eslint
配置 .eslintrc
在根目录下新建一个.eslintrc的空文件：
安装配置webpack
配置webpack之前，先安装一个webpack的插件——html-webpack-plugin，它可以帮助我们自动生成HTML页面，并且引入正确的JavaScript文件依赖：
在项根目录下新建一个webpack.config.js文件:
module.exports = {
entry: {
app: path.resolve(APP_PATH,'index.jsx')
},output: {
path: BUILD_PATH,filename: 'bundle.js'
},// 开启 dev source map
devtool: 'eval-source-map',// 开启 webpack dev server
devServer: {
historyApiFallback: true,hot: true,inline: true,progress: true
},modules: {
// 配置preLoaders,将eslint 添加进去
preLoaders: [
{
test: /.jsx?$/,loaders: ['eslint'],include: APP_PATH
}
],// 配置loader，将Babel添加进去
loaders: [
{
test: /.jsx?$/,loaders: ['babel'],include: APP_PATH
}
]
},// 配置 plugin
plugins: [
new HtmlwebpackPlugin({
title: 'my first react webpack'
})
],resolve: {
extensions: ['','.js','.jsx']
// 在js中import加载jsx扩展名的脚本
}
}
entry: {
app: path.resolve(APP_PATH,'index.jsx')
},output: {
path: BUILD_PATH,filename: 'bundle.js'
},// 开启 dev source map
devtool: 'eval-source-map',// 开启 webpack dev server
devServer: {
historyApiFallback: true,hot: true,inline: true,progress: true
},modules: {
// 配置preLoaders,将eslint 添加进去
preLoaders: [
{
test: /.jsx?$/,loaders: ['eslint'],include: APP_PATH
}
],// 配置loader，将Babel添加进去
loaders: [
{
test: /.jsx?$/,loaders: ['babel'],include: APP_PATH
}
]
},// 配置 plugin
plugins: [
new HtmlwebpackPlugin({
title: 'my first react webpack'
})
],resolve: {
extensions: ['','.js','.jsx']
// 在js中import加载jsx扩展名的脚本
}
}
添加组件热加载（HMR）功能
这个preset里面其实包括两方面：
- react-transform-hmr用来实现热加载
- react-transform-catch-errors用来捕获render里面的方法，并且直接展示在界面上
配置一下 .babelrc：
