详解Webpack热刷新与热加载区别及React热加载配置

Webpack热刷新与热加载概述

Webpack功能强大，合理的构建工具配置能显著简化开发流程。其中，热刷新和热加载机制相比传统手动刷新，大幅提升了开发效率。

从常见脚手架对比热刷新与热加载的差异

大多数Vue开发者从vue-cli起步，许多初学者虽能运行项目，却因Webpack配置复杂且vue-cli已做大量优化而不敢随意修改配置。

相比之下，React缺乏一个广泛公认且健壮的官方脚手架（至少未明显发现）。常见的有yeoman的generator-react-webpack、React官方的create-react-app，以及集成度较高的react-starter-kit（支持热加载，代码参考价值高）。在学习React时，我发现前两种脚手架提供的是热刷新而非热加载。

热刷新与热加载的核心区别

简单区分热加载与热刷新：

热刷新：文件内部改动后，整个页面刷新，不保留任何状态（例如已输入内容的Input表单），相当于Webpack自动执行F5刷新操作。热加载：文件改动后，以最小代价仅更新受影响区域，尽可能保留改动前的状态（如在Input输入内容后，修改其他标签代码，输入内容不会丢失）。

虽然两者相比传统手动F5刷新都提升了开发体验，但差异显著，尤其在项目复杂度增加时。我们需要一劳永逸地解决此问题，以节省更多时间用于Bug修复。

React项目热加载配置实战

动手修改配置

从零配置Webpack属于另一个领域，因此我们直接从vue-cli入手进行修改。

以下步骤仅列出关键操作以启发参考，详细配置请参考文末GitHub完整项目。

删除Vue相关依赖、文件等；src目录下的所有内容均可删除。
在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配置的入口文件一致）。

React热加载关键代码示例


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文件中：

HotModuleReplacementPlugin的作用


new webpack.HotModuleReplacementPlugin()

经网络查询得知，这是实现热加载的关键。它要求代码本身具备模块化性质（这意味着像Vue、React、Angular三大框架这样可编写可复用组件的框架都能利用此性质），从而通过插件机制实现热加载。

而React的JSX特效并非HotModuleReplacementPlugin能直接解决的，若不使用额外工具，只能老老实实进行热刷新。

解决方案：引入react-hot-loader

在此情况下，react-hot-loader应运而生。配合官方使用方法，即可继续使用热加载功能。

注：本文仅作参考，React的许多代码我也处于探索与学习中。

配置好的项目地址：GitHub（注：原文为gayhub，此处修正为通用拼写或保留原意，建议指向GitHub）

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

Webpack热刷新与热加载的区别及React配置实战