如何正确的使用webpack中热刷新与热加载

程序员文章站 2022-04-03 14:21:42

...

这次给大家带来如何正确的使用webpack中热刷新与热加载，使用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完整项目

删除vue相关的依赖、文件等；整个scr内的东西都可以删掉
package.json依赖加入babel-loader webpack-dev-server react-hot-loader(最关键)
package.json命令行设置 "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"
webpack.base.conf 添加.jsx文件需要经过babel-loader处理，配置options:{plugins:['react-hot-loader/babel']}
.babelrc presets加入react，下方加入plugins:['react-hot-loader/babel']
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的很多代码我也处于探索与学习中

相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！

如何正确的使用webpack中热刷新与热加载

webpack中的热刷新与热加载的区别

webpack热刷新与热加载使用详解

webpack中的热刷新与热加载的区别