前言：
構建React項目的幾種方式：
- 構建：create-react-app 快速腳手架
- 構建：generator-react-webpack
- 構建：webpack一步一步構建
1）構建：create-react-app 快速腳手架
FaceBook官方發布了一個無需配置的、用於快速構建開發環境的腳手架工具create-react-app。
creat-react-app優點
- 無需配置：官方的配置堪稱完美，幾乎不用你再配置任何東西，就可以上手開發項目。
- 高集成性：集成了對React，JSX，ES6和Flow的支持。
- 自帶服務：集成了開發服務器，你可以實現開發預覽一體化。
- 熱更新：保存自動更新，讓你的開發更簡單。
- 全兼容性：自動處理CSS的兼容問題，無需添加-webkit前綴。
- 自動發布：集成好了發布成品功能，編譯后直接發布，並且包含了sourcemaps功能。
create-react-app的安裝
npm install -g create-react-app # Windows sudo npm install -g create-react-app # Linux
創建React項目
create-react-app my-app
cd my-app
npm start
2）構建：generator-react-webpack
npm install -g yo # 在全局安裝generator-react-webpack之前，先安裝yeoman npm install -g generator-react-webpack
mkdir new-react-demo
cd new-react-demo
yo react-webpack
npm start
3）構建：webpack一步一步構建
安裝webpack
在安裝webpack之前，我們先建立一個文件夾並進入，當然你可以用其他方法，我這里就用命令了。
mkdir react-webpack
cd react-webpack
npm init
npm install --save-dev webpack
配置webpack.config.js
在項目根目錄建立webpack.config.js文件，這個文件是進行webpack配置的，先建立基本的入口和出口文件。
var path =require('path');
module.exports = {
//入口文件
entry:'./app/index.js',
//出口文件
output:{
filename:'index.js',
path:path.resolve(__dirname,'dist')
}
}
新建index.html文件，在根目錄新建index.html文件，並引入webpack設置中的出口文件，代碼如下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>React全家桶-jspang</title>
</head>
<body>
</body>
<!--引入出口文件-->
<script src="./dist/index.js"></script>
</html>
測試webpack配置
通過上面的步驟，配置好了wbpack，現在可以測試一下我們webpack配置是否有問題。在路口文件中寫入下面的代碼，並進行打包測試。
/app/index.js文件
function component(){
var element = document.createElement('div');
element.innerHTML = ('Hello JSPang');
return element;
}
document.body.appendChild(component());
這段代碼非常簡單，不作過多的解釋。如果你對這個代碼看不懂，再去啃兩邊犀牛或者紅寶書。
加入打包命令
打開package.json文件，在scripts屬性中加入build命令。
"scripts": {
"build": "webpack"
},
在終端中輸入npm run build ，就可以看到打包結果了。如果沒有出現錯誤，在瀏覽器中打開，可以看到我們的編寫結果。到這部為止，我們正確安裝了webpack，並進行了出入口的配置，也看到了webpack的輸出結果。
開發服務器配置
你會很容易的發現，我們現在缺少一個實時更新的服務，那動手馬上配置一個。
在命令行安裝webpack-dev-server,在終端中輸入下面的命令。
cnpm install --save-dev webpack-dev-server
安裝完成后，配置webpack.config.js文件。
devServer:{
contentBase:'./',
host:'localhost',
compress:true,
port:1717
}
配置好后再packeage.json里增加一個scripts命令，我們起名叫server。
"scripts": {
"build": "webpack",
"server": "webpack-dev-server --open"
},
這里的–open是直接打開瀏覽器的意思。這些都配置完成后，就可以在終端輸入npm run server 看到結果了。
自動刷新瀏覽器
在我們修改代碼時，現在並不能自動刷新瀏覽器，不會立即呈現我們編寫的代碼結果，而時要再次npm run build才可以。其實只要在出口文件配置中加一個publicPath:’temp/’,然后在index.html引入JS時寫這個temp地址就可以實時預覽了。
output:{
filename:'index.js',
path:path.resolve(__dirname,'dist'),
publicPath:'temp/'
},
index.html文件引入JS
<script src="./temp/index.js"></script>Babel安裝配置
在webpack中配置Babel需要先加入babel-loader，這里我們繼續使用npm來進行安裝，但是我們一般還需要支持es2015和React，所以要安裝四個包。
cnpm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
這里安裝四個包的安裝，這個四個包不能省略。安裝后你會在package.json里看到這些包的版本。
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.3"
}
配置module
在安裝完成后，可以到webpack.config.js里配置module，也就是配置我們常說的loader。
module:{
loaders:[
{
test:/\.js$/,
exclude:/node_modules/,
loaders:"babel-loader",
query:{
presets:['es2015','react']
}
}
]
}
編寫React
webpack通過上邊的步驟，基本已經配置完成了，這里我們寫一個React文件來進行測試一下。在進行編寫React文件前，要記得安裝React和React-dom這兩個包。
安裝React和React-dom
cnpm install --save react react-dom安裝完成后，我們改寫app/index.js文件，把原來原生的JavaScript代碼改成React代碼。
index.js
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<div>Hello JSPang</div>,
document.getElementById("app")
);
因為上邊我們加了一個app的選擇器，所以在index.html中增加一個div標簽，並把id設置成app。
index.html
<div id="app"></div>都配置完了，我們可以用之前配置好的npm run server 命令進行預覽了。如果在瀏覽器中看到了Hello JSPang 這段文字，說明我們的配置成功了，以后就可以愉快的進行開發了。
總結：其實自己配置React開發環境在實際工作中也並不多，因為我們的配置畢竟不是很成熟，而且支持較少。這里學習只是為了你更好的掌握React構建過程和設置參數，實際工作中盡量使用合適的腳手架工具。
轉載自：jspang.com/2017/10/22/react-all-01/
webpack.config.js的完整代碼
var path = require('path');
module.exports = {
// 入口文件
entry: './app/index.js',
// 服務器配置
devServer: {
contentBase: './',
host: 'localhost',
compress: true,
port: 1717
},
// 配置Babel
module:{
loaders:[
{
test:/\.js$/,
exclude:/node_modules/,
loaders:"babel-loader",
query:{
presets:['es2015','react']
}
}
]
},
// 出口文件
output: {
filename: 'index.js',
path: path.resolve(__dirname,'dist'),
publicPath: 'temp/'
}
}