當前webpack版本：2.2；react: 15.4.2
webpack從1.x升級到2.x替換了幾個接口，包括module.loaders這樣的重要接口已被棄用（詳細變更）。官網目前已不推薦使用1.x版本，早上折騰一番，根據2.2版本配置了react基本的開發環境，滿足不太復雜的web應用開發，后期會逐步優化配置文件。
如果您之前使用過webpack，需要改動的地方並不大。下文假定您沒有接觸過類似的打包工具（但了解npm、jsx再好不過），以跟我一樣一個新手的身份認識這些，如有不妥之處望不吝賜教。
如果您的react項目是引入的以下三個js文件在瀏覽器端編譯jsx，那么不需要用webpack做開發環境。
1 <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script> 2 <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script> 3 <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
但是在產品上線階段，我們很不推薦這樣做。1，用戶需要下載這三個文件，浪費了帶寬；2，下載完成后需要在瀏覽器端編譯jsx文件，浪費了時間和資源。
如果將開發階段的項目代碼打包編譯為一個js文件，再推上線，那么：1，將HTTP請求減少為1個；2，不需要用戶端再浪費時間和資源去編譯，直接運行上線前已編譯好的js代碼。
如果是前者，引入項目js代碼的script標簽type值為"text/babel"；如果是后者，type值為"text/javascript"。
如何做？
一，安裝nodejs，使用它附帶的npm包管理工具。為什么要用npm？后期會下載react依賴、babel依賴、webpack工具，使用npm方便很多。不使用npm也可以，但無疑會增加諸多困難。
二，新建一個項目文件夾，在文件夾內打開終端，即Windows下的命令行（Shift+鼠標右鍵），運行 npm init ，如果沒有特殊要求，可一直按回車鍵到最后一步。
三，在終端內執行如下命令下載需要的所有依賴和工具， --save-dev 詳見SegmentFault解釋
npm install react react-dom babel-loader babel-core babel-preset-es2015 webpack webpack-dev-server --save-dev
四，配置webpack配置文件。在根目錄下，即與package.json同級下新建webpack.config.js文件，在文件內部寫入如下內容
// webpack.config.js var webpack = require("webpack"); var path = require("path"); module.exports = { entry: './dev/entry.jsx', // 入口文件
devtool: 'source-map', // 調試時定位到編譯前的代碼位置，推薦安裝react插件 output: { path: path.resolve(__dirname, "./dist/js/"), filename: 'bundle.js' // 打包輸出的文件 }, module: { rules: [{ test: /\.jsx?$/, // test 去判斷是否為.js或.jsx,是的話就是進行es6和jsx的編譯 exclude: /(node_modules|bower_components)/, loader: 'babel-loader', query: { presets: ['es2015', 'react'] } }] }, resolve: { // 現在你import文件的時候可以直接使用import Func from './file'，不用再使用import Func from './file.js' extensions: ['.js', '.jsx', '.json', '.coffee'] } };
目錄結構：
app |__dev | |__components | |__entry.jsx |__dist | |__css | |__js | |__bundle.js | |__index.html |__node_modules |__package.json |__webpack.config.js
對於這份配置文件有如下說明
1，標紅的部分可自定義
2，react項目文件可以用js格式，也可以用jsx格式，但是輸出文件為在HTML文件中引用的文件，必須為js格式。
3，本配置入口文件在dev目錄下，輸出文件在dist目錄下，具體可自定義配置。
4，module.rules為2.x新增的接口，代替原先使用的module.loaders
5，去掉query會報錯，也可將其規則寫入package.json文件，具體寫法見參考鏈接
五，在package.json文件scripts部分添加如下代碼
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "webpack-dev-server --hot --open --content-base ./dist/", "deploy": "webpack -p --progress --config webpack.config.js" },
注：--content-base參數指定根html文件所在位置。
六，開發階段在終端使用 npm start 自動編譯代碼並刷新；使用 npm run build 編譯生產環境代碼。
注：webpack-dev-server自動編譯代碼和刷新瀏覽器並不會將編譯后的文件寫入磁盤，而是保持在內存中，因此此時在html文件中引入的腳本文件src為"bundle.js"，沒有任何路徑，如果在webpack.config.js的ouput中指定了"publicPath"，情況又有所不同，詳見參考鏈接第三個。
附：webpack編譯過程中常用的參數，可在scripts編譯命令中分別配置
webpack開發環境下編譯webpack -p產品編譯及壓縮webpack --watch開發環境下持續的監聽文件變動來進行編譯(非常快!)webpack -d引入 source maps
eslint支持：
npm i eslint babel-eslint eslint-plugin-react --save-dev
新建一個.eslintrc文件，寫入react支持基本參數
{ "plugins": ["react"], "extends": ["eslint:recommended", "plugin:react/recommended"], "parser": "babel-eslint" }
推薦安裝編輯器對應的eslint插件，可以在界面實時顯示錯誤信息。
參考鏈接：webpack-howto 、w3cplus、segmentfault