webpack+react+es6环境配置

*所有的全局安装电脑第一次用的时候安装，安过一次即可省略，添加到依赖不可省略 [-D===--save-dev] 

1、创建文件夹（以下都在当前文件夹下）

   //webpack的引用

2、初始化创建package.json: npm init

3、全局安装webpack: npm install webpack -g(全局安装)

   并安装依赖webpack: npm install webpack –D

   //css的引用

4、安装css,style压缩模块：

npm install css-loader style-loader -D

   //解析jsx

5、安装babel-loader模块：npm install babel-loader  –D

   //ES6的引用

6、安装babel转换器模块：npm install babel-core  –D

7、安装es6模块：npm install babel-preset-es2015  –D

   //react的引用

8、安装react相关模块：
npm install react  react-dom  babel-preset-react  –D

   //文件路径以及url的引用

9、安装url-loader  file-loader模块将图片及其他格式文件解析：

npm install url-loader file-loader  –D

   //webpack-dev-server: 开一个轻量级服务器，进行热替换以及后边热更新的配置。

10、安装webpack服务webpack-dev-server：

npm install webpack-dev-server –g (全局安装)

并且安装到依赖中：npm install webpack-dev-server  –D

11、安装react-hot-loader热加载：npm install react-hot-loader -D

 

 

//11热更新另一种方法替react-hot-loader(此方法不需要在webpack.config.js中的moudule写入代码)

11、热更新配置npm install babel-preset-react-hmre  -D

在.babelrc文件中的配置：

{

“presets” : [“react” ,  “es2015”] ,

  “env” : {

“development” ： {

“presets” : “react-hmre”

}

}

}