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