本文介紹了React + webpack 環境配置的方法步驟，分享給大家，具體如下：

安裝配置Babel

babel-preset-es2015 ES6語法包，使代碼可以隨意地使用ES6的新特性。

babel-preset-react React語法包，專門用于React的優化，在代碼中可以使用React ES6 classes的寫法，同時直接支持JSX語法格式

安裝Babel loader

// 安裝babel-core核心模塊和babel-loadernpm install babel-core babel-loader --save-dev// 安裝ES6 和 React 支持npm install babel-preset-es2015 babel-preset-react --save-dev

配置 .babelrc

安裝完Babel和它的插件，配置一下它的規則，在根目錄下新建一個.babelrc空文件：

// 告訴Babel，編譯JavaScript代碼的時候要用這兩個presets編譯 {  "preset": ["es2015", "react”] }

安裝配置ESLint

安裝ESLint loader

為webpack添加這個preLoaders（在loader處理資源之前，先用preLoaders進行處理，代碼檢查在代碼轉換之前進行）

npm install eslint eslint-loader --save-dev

這里使用Airbnb開發配置合集eslint-config-airbnb，這個配置合集里面還包括以下3個插件：

npm install eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y --save-devnpm install eslint-config-eslint

配置 .eslintrc

在根目錄下新建一個.eslintrc的空文件：

{  "extends": "airbnb",  "rules": {   "comma-dangle": ["error", "never"]  } }

安裝配置webpack

配置webpack之前，先安裝一個webpack的插件——html-webpack-plugin，它可以幫助我們自動生成HTML頁面，并且引入正確的JavaScript文件依賴：

npm install html-webpack-plugin —save-dev

在項根目錄下新建一個webpack.config.js文件:

let path = require('path') let webpack = require('webpack')let HtmlwebpackPlugin = require('html-webpack-plugin')// 一些常用路徑const ROOT_PATH = path.resolve(__dirname)const APP_PATH = path.resolve(ROOT_PATH, 'app')const BUILD_PATH = path.resolve(ROOT_PATH, 'build')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擴展名的腳本 }}