DDR爱好者之家

webpack中的热刷新与热加载的区别
站长资源 2025/1/12 佚名
17 1538
DDR爱好者之家 Design By 杰米

webpack非常的强大，合理的脚手架可以为我们的工作省去众多繁琐无意义的工作。其中热刷新、热加载相较于传统开发大大提高了开发节奏。

从脚手架发现热刷新、热加载的差异

相信大部分的vue开发者都是从vue-cli开始的，很多初学者欢快的跑着vue项目却不敢改随意改变vue-cli的配置（毕竟webpack确实很复杂，vue-cli也做了很多工作来优化初学者的体验）。

相比之下react没有提供一个比较健壮的脚手架了(至少没有明显地被我找到，望赐教)。据我知一个是yeoman的 generator-react-webpack、react的create-react-app，还有一个不错的react-starter-kit (热加载，而且集成了非常多代码，参考性很高)。
在学习react时我就发现了上文提到的react前两个脚手架提供的是热刷新而非热加载。

简单的区分热加载与热刷新:

热刷新：文件内动改动后，整个页面刷新，不保留任何状态（比如输入过内容的Input表单），相当于webpack帮你摁了F5刷新
热加载：文件改动后，以最小的代价改变被改变的区域。尽可能保留改动文件前的状态（对input输入内容后，修改其他标签的代码）

这在虽然两者相较于传统开发（手动F5）都提升了开发体验，但两者之间的依旧很大，尤其是当项目变得愈发复杂之后，我们必须一劳永逸的解决这个问题（留出更多的时间来开发bug）。

动手修改

从头配置就是另一个领域了，所以我们直接从vue-cli开始改动。

下述步骤仅列出关键做启发参考，详细请参考最后github完整项目

  1. 删除vue相关的依赖、文件等；整个scr内的东西都可以删掉
  2. package.json依赖加入babel-loader webpack-dev-server react-hot-loader(最关键)
  3. package.json命令行设置 "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"
  4. webpack.base.conf 添加.jsx文件需要经过babel-loader处理，配置options:{plugins:['react-hot-loader/babel']}
  5. .babelrc presets加入react，下方加入plugins:['react-hot-loader/babel']
  6. src文件夹下创建main.js（起名要跟webpack配置的入口文件一致）
import 'core-js/fn/object/assign';
import React from 'react';
import ReactDOM from 'react-dom';
import { hot } from 'react-hot-loader';

import App from './pages/App'; // 自己写吧
import './assets/css/reset.scss';

// Render the main component into the dom
ReactDOM.render(<App/>, document.getElementById('app'));

export default hot(module)(App); // 热加载的关键

至此，我们就可以愉快地使用react体验热加载的快♂感了~

问题所在

其实在简单地修改vue-cli中的main.js文件为react相关代码（别忘了配置babel处理jsx）并依旧是热刷新。

经过本地代码观察对比后，发现了一个吸引人的名字：

在webpack.dev.conf文件中：

new webpack.HotModuleReplacementPlugin()

网上查询后得知这是实现热加载的关键，它需要代码本身具备模块化的性质（这意味着只要像三大框架这样可编写可复用组件的框架都能利用这个性质），这样才可以通过插♂拔代码实现热加载。

而react的jsx特效不是HotModuleReplacementPlugin能搞定的只能老老实实热刷新了。

在这种情况下react-hot-loader呼之欲出。配合官方的使用方法，就能继续使用热加载了。

ps: 仅做参考，react的很多代码我也处于探索与学习中

配置好的项目地址：gayhub

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米