react項目搭建及webpack配置

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