1，配置webpack

npm install -g webpack                       webpack的cli環境

npm install -g webpack-dev-server       webpack自帶伺服器

2，各種依賴庫

babel相關庫

npm install babel-core -D        後臺編譯babel工具 -D是--save-dev的縮寫

npm intall babel-preset-es2015  -D      babel對es2015的預設

npm install babel-loader -D     babel載入器

webpack本身

npm install webpack -D      webpack本地依賴庫

npm install webpack-dev-server -D     webpack伺服器的本地依賴

npm install babel-preset-react -D    bebel-react預設

npm install react -D   react庫本身

npm install react-dom -D    react-dom本身

npm install react-hot-loader -D     熱更新

npm install style-loader  -D  

npm install css-loader -D

3.webpack相關配置
webpack.config.js

modules.exports={
entry:'./index.js',
output:{
path:__dirname,
filename:
 
'bundle.js'
},
devtool:"source-map", //開發工具
module:{
loaders:[
{test:/\.css$/,loader:'style!css'},
{test:/\.js$/,loader:'react-hot!babel',exclude:/node_modules/},
]
}
}

搭建react專案

安裝node  判斷是否安裝 node -v

網速慢可以安裝淘寶映象

專案初始化

npm install -g create-react-app

create-react-app react-demo

cd react-demo

npm start