react配置环境及webpack配置实现热替换

1.根目录下建一个webpack.dev.js，设置好入口出口文件等内容。

2.npm init,生成package.json,其中会显示你所安装的依赖，然后对应可以找出少了哪些你需要的依赖。

3.安装缺少的react包。

npm install --save react react-dom
npm install --save-dev webpack babel-cli babel-loader babel-preset-es2015 babel-preset-react

4.修改package.json里面的scripts：

“scripts”：{
   “dev”：“webpack --config webpack.dev.js” 
}

到这边，webpage和react的基本配置就完成了。如果想要实现热替换的话，接下来的步骤可以实现。

1.用webpage创建一个本地服务器。

npm webpack-dev-server html-webpack-plugin --save-dev

2.修改package.json里面的scripts：

“scripts”：{
   “dev”：“webpack-dev-server --config webpack.dev.js”
}

3.安装react-hot-loader：

npm install --save-dev react-hot-loader

4.更改webpack.dev.jsh和.babelrc的配置，这里主要是记录流程。具体变更内容就不贴出来了。

5.最后npm run dev就可以启动热替换了。

以上内容不是很完善，为了自己方便记忆和整理流程写的。如果有错误，敬请指出。

参考文档链接：

http://www.ruanyifeng.com/blog/2015/03/react.htm

https://github.com/varHarrie/YmxvZw/issues/14
--------------------- 
作者：嘴角的面包屑 
来源：CSDN 
原文：https://blog.csdn.net/sinat_41218003/article/details/79021879