前言
用了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配置
第三步：既然是要构建的react项目那就肯定要下载react的依赖啦
执行我们的cnpm i react react-dom --save指令
第四步：我们还要安装webpack以及babel插件
执行cnpm i webpack babel-loader babel-preset-env --save-dev
第五步: 安装了webpack后我们要编写webpack.config.babel.js以及.babelrc文件(或者webpack.config.js多了个babel是为了让webpack支持es6语法)
第六步：编写我们的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文件他都帮我们实时打包好，只需要刷新页面就可以看到变化
刷新后：
但是这样又有问题。我们每次都要刷新才能看到变化还是有点麻烦，作为一名合格的程序员，我们应该以懒为优点，那么有没有不需要刷新就可以看到变化的呢？有！
第八步：引入我们的webpack-dev-server插件，执行cnpm i webpack-dev-server --save-dev安装
之后编写webpack配置
然后执行我们的webpack-dev-server指令开启服务，打开8091端口即可访问
随后我们任意改动我们的index.jsx代码他都会自动刷新页面
到了这一步基本上已经大功告成了，但是还是有个问题。我们每次更新代码都会导致整个页面刷新，这样不仅体验不好而且项目大了之后刷新的成本也很高。有没有办法实现就局部刷新呢？当然是...有！
第九步：我们需要添加babel-preset-react-hmre插件。先执行cnpm i babel-preset-react-hmre --save-dev
关于这个插件的详细说明有官方文档这么权威的东西就不用我班门弄斧了～总之他就是一个可以实现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
这里举个 （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
