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