手把手教你从零搭建react局部热加载环境

前言

用了3个多月的vue自认为已经是一名合格的vue框架api搬运工，对于vue的api使用到达了一定瓶颈，无奈水平有限，每每深入底层观赏源码时候都迷失了自己。
遂决定再找个框架学习学习看看能否突破思维局限，加上本人早已对React、RN技术垂涎已久,于是决定找找教程来学习。无奈第一步就卡在了环境搭建上面，翻阅了各大站点的文章都发现了一个共同的问题...文章都是16年的，许多用的还是webpack1.x
如今webpack都3.x了，为了不被时代所淘汰，我们要与时俱进跟上时代的步伐，使用最新的构建方式～

正文

既然说了是从零开始那我这边肯定是没有什么目录结构的，不要怕挽起袖子就是干～

第一步：就是打开我们的终端创建一个空文件夹

例如：我在桌面上创建了react-test文件夹

第二步：执行我们的npm init -y命令创建package.json文件。

我这边就偷懒多打了个-y快速创建，你也可以执行npm init一步步编写package.json配置

第三步：执行我们的cnpm i react react-dom --save指令

既然是要构建的react项目那就肯定要下载react的依赖啦

第四步：执行cnpm i webpack babel-loader babel-preset-env --save-dev

我们还要安装webpack以及babel插件

第五步: 编写配置文件

安装了webpack后我们要编写webpack.config.babel.js以及.babelrc文件(或者webpack.config.js多了个babel是为了让webpack支持es6语法)

.babelrc文件

第六步：编写我们的react代码

第七步： 项目启动

执行我们的webpack指令,然后我们会在我们的项目中看到多了个dist目录里面包含一个bundle.js文件

至此，我们的react打包项目已经初步完成了，怎么去用呢？
我们需要一个html页面来展示数据。我们可以在项目根目录下创建一个index.html，编写以下代码

然后我们打开终端开启http-server服务，就可以在本地查看我们的项目。当然你直接用浏览器打开这个文件也是可以的。

但是这样做有个问题就是，每次我们修改完index.jsx都要执行webpack指令重新打包并且index.html还要手动给bundle.js添加缓存我们才能看到代码的变化。有什么办法可以简化这个流程呢？有，这时候我们引入html-webpack-plugin插件来动态生成index.html

第八步：执行cnpm i html-webpack-plugin --save-dev指令

接下来安装我们的html插件，并且我们先修改一下我们的模版文件

之后修改下webpack配置

此时再执行我们的webpack --watch指令就会生成这样一些文件,并且可以实时监听我们的代码变化

然后我们进到我们的dist目录查看代码可以发现一样可以访问

之后任意改动我们的index.jsx文件他都帮我们实时打包好，只需要刷新页面就可以看到变化

刷新后：

但是这样又有问题。我们每次都要刷新才能看到变化还是有点麻烦，作为一名合格的程序员，我们应该以懒为优点，那么有没有不需要刷新就可以看到变化的呢？有！

第九步：执行cnpm i webpack-dev-server --save-dev安装

引入我们的webpack-dev-server插件

之后编写webpack配置

然后执行我们的webpack-dev-server指令开启服务，打开8091端口即可访问

随后我们任意改动我们的index.jsx代码他都会自动刷新页面

到了这一步基本上已经大功告成了，但是还是有个问题。我们每次更新代码都会导致整个页面刷新，这样不仅体验不好而且项目大了之后刷新的成本也很高。有没有办法实现就局部刷新呢？当然是...有！

第十步：执行cnpm i babel-preset-react-hmre --save-dev

为了实现局部热加载，我们需要添加babel-preset-react-hmre插件。

关于这个插件的详细说明有官方文档这么权威的东西就不用我班门弄斧了～总之他就是一个可以实现react局部热加载的插件
https://github.com/gaearon/re...
怎么用呢？既然他是babel插件那肯定设置要在.babelrc中设置,添加以下字段

这些字段什么意思呢，就是在development(开发)环境中引入我们的react局部热加载插件
然后我们再执行webpack-dev-server开启服务,发现一切正常

但是我们返回窗口查看的时候发现页面一片空白并且报了个错

这是因为我们在开发环境中使用了react-hmre热加载插件，而webpack-dev-server却没有开启热加载导致的。我们只需要添加--hot字段就可以解决。
执行webpack-dev-server --hot命令，修改我们的index.jsx文件后回到我们的8091端口查看发现

但是每次开启服务都要记住这么多指令显然对新手来说是不友好的，为了节省下一个人的学习成本我们可以在package.json定义script脚本

之后我们打开服务只需要执行npm run dev，node会帮我们执行｀webpack-dev-server --hot｀指令
好了，到达这一步我们的环境搭建已经进入尾声了，我们已经完成了react项目的局部热加载功能。
但是....为了让我们开发更加方便一点我们还需要借助种种loader
这里举个? 我们如果需要编译sass文件

第十一步：执行cnpm i sass-loader node-sass css-loader style-loader --save-dev

安装所需插件

然后我们再修改webpack配置

最后再执行我们的npm run dev命令就可以愉快的开发啦～～

后言

关于文件命名以及路径配置，大家完全可以在webpack配置中修改，我这里只是举了个例子。
还有各种插件的添加以及配置例如postcss url-loader file-loader等等 这些暂时不属于react环境搭建涉及到的，大家按需去官方文档看看使用说明就好～
此外，react官方还提供了一个脚手架create-react-app(好长的名字)供大家开发学习，https://github.com/facebookin...
我也体验了下还不错，只是我个人更喜欢自己瞎折腾哈哈
附上我的github项目地址 －－－ https://github.com/HQ-Lin/rea...
项目刚起步慢慢会给他添砖加瓦 欢迎给个star鼓励下，歇歇～

最后祝大家学习愉快～早日升职加薪迎娶白富美走向人生巅峰！

补充

以上的配置在开发中是没问题的，但是开发完成后直接执行webpack指令打包成独立文件的时候还是有点小问题。

我们需要在webpack命令之前添加BABEL_ENV='production'设置babel环境变量，否则他会默认为development环境而去使用热加载插件。

此时再去dist目录下直接打开我们的index.html就ok了