因網上大多React + webpack快速搭建的運行不起來，便自行寫了一個。在搭建開發環境的前需安裝nodejs，npm。
新建一個工作目錄，比如叫reactdome，在reactdome目錄中運行命令npm init；這里可以全部按enter執行，直到執行完畢，執行完畢后將會自動生成package.json文件。在package.json文件中配置如下代碼：
{
"name": "",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server --hot --progress --colors",
"build": "webpack --progress --colors"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.0.20",
"babel-loader": "^6.0.1",
"babel-preset-es2015": "^6.0.15",
"babel-preset-react": "^6.0.15",
"css-loader": "^0.25.0",
"react": "^15.3.2",
"react-css-modules": "^4.0.3",
"react-dom": "^15.4.0",
"react-router": "^3.0.0",
"style-loader": "^0.13.1",
"webpack": "^1.13.3",
"webpack-dev-server": "^1.16.2"
}
}
里面的文件都是必須的，后期需要其他的可自行添加安裝更多。
package.json文件配置完畢，執行npm install命令即可（我有翻牆，如果安裝有問題可自行百度找阿里鏡像安裝npm）。
在reactdome文件夾中新建webpack.config.js文件，里面配置對應代碼
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: [
'webpack/hot/dev-server',
path.resolve(__dirname, './app/index.js')
],
output: {
path: path.resolve(__dirname, './build'),
filename: 'bundle.js',
},
module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {presets: ['es2015', 'react'] }
}
]
},
resolve: {
extensions: ['','.js', '.jsx'],
}
};
在reactdome文件里面新建一個index.htm文件，文件代碼如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>reactdome</title>
</head>
<body>
<div id="content"></div>
<script src="bundle.js"></script>
</body>
</html>
在reactdome文件里面新建一個app文件夾，app文件夾中新建一個index.js的文件，代碼如下：
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('content')
);
文件代碼目錄如下：
全部執行配置完畢之后，運行命令：npm run dev，打開瀏覽器輸入http://localhost:8080/就可以運行你的代碼了。
配置的過程中可能因為版本等問題不能正常執行，可回退到對應的穩定版本。good luck~