什么是 webpack？
webpack 是一个模块打包工具，能够帮助我们将各种类型的文件（JavaScript、CSS、HTML、图片等）打包成适合生产环境部署的文件，同时提供了各种插件和 loader 帮助我们更好地管理模块和依赖。
什么是 HMR？
HMR 是 Hot Module Replacement 的缩写，热模块替换，指的是在应用程序运行时，对代码的修改能够被实时地应用到运行中的程序中去，无需刷新页面或重新加载整个应用。这个功能能够大大提升开发效率和体验。
webpack 如何配置 HMR？
webpack4.x 版本已经内置了 HMR 功能，只需在配置文件中开启 HMR 即可。在 webpack.config.js 中添加如下代码：
-- -------------------- ---- ------- ---------- - ------------ -------------------- -------- --------- ----- ----- ----- ---- ---- -- -------- - --- ------------------------------------ -
其中，devServer.hot 设置为 true 表示开启 HMR；而 plugins 部分中添加了 HotModuleReplacementPlugin 插件，这个插件能够将 HMR 运用到 webpack 打包生成的代码中。
如何在 React 应用中使用 HMR？
以使用 React 开发应用为例，我们需要在应用程序的入口（一般是 index.js）中添加以下代码：
if (module.hot) {
module.hot.accept('./App', () => {
const NextApp = require('./App').default;
ReactDOM.render(<NextApp />, document.getElementById('root'));
});
}其中，module.hot 判断当前环境是否支持 HMR；module.hot.accept 监听模块变化并触发回调函数，这里我们需要重新渲染组件以实现热替换。
示例代码
webpack.config.js 文件：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
-------------- - -
----- --------------
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
--
---------- -
------------ -------------------- --------
--------- -----
----- -----
---- ----
--
-------- -
--- ------------------------------------
-
--index.js 文件：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ --- ---- --------
-------------------- --- ---------------------------------
-- ------------ -
-------------------------- -- -- -
----- ------- - -------------------------
------------------------ --- ---------------------------------
---
-总结
webpack 使用 HMR 实现热替换，可以大大提升开发效率和体验。凭借着其强大的插件和 loader 系统，webpack 已经成为前端工程化中不可或缺的一部分。希望本文能够对读者们学习 webpack 和 HMR 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c301be83d39b48816ed975