跳到主要内容

hot

2023年12月20日
柏拉文
越努力，越幸运

一、认识​

如果已经通过 HotModuleReplacementPlugin 启用了 Hot Module Replacement, 则它的接口将被暴露在 module.hot 以及 import.meta.webpackHot 属性下。请注意，只有 import.meta.webpackHot 可以在 strict ESM 中使用。

1.1 启用​

const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
};

1.2 访问​

if (module.hot) {
  module.hot.accept('./library.js', function () {
    // 对更新过的 library 模块做些事情...
  });
}

// or
if (import.meta.webpackHot) {
  import.meta.webpackHot.accept('./library.js', function () {
    // Do something with the updated library module…
  });
}

二、import.meta.webpackHot.data​

三、import.meta.webpackHot.accept​

module.hot.accept 接受(accept)给定 依赖模块(dependencies) 的更新，并触发一个 回调函数 来响应更新

3.1 语法​

接受自身更新

module.hot.accept(
  errorHandler // 在计算新版本时处理错误的函数
);

// or
import.meta.webpackHot.accept(
  errorHandler // Function to handle errors when evaluating the new version
);
module.hot.accept(
  dependencies, // 可以是一个字符串或字符串数组
  callback // 用于在模块更新后触发的函数
  errorHandler // (err, {moduleId, dependencyId}) => {}
);

// or
import.meta.webpackHot.accept(
  dependencies, // 可以是一个字符串或字符串数组
  callback, // 用于在模块更新后触发的函数
  errorHandler // (err, {moduleId, dependencyId}) => {}
);

四、import.meta.webpackHot.decline​

module.hot.decline 拒绝给定依赖模块的更新，使用 decline 方法强制更新失败。

4.1 语法​

module.hot.decline(
  dependencies // 可以是一个字符串或字符串数组
);

// or
import.meta.webpackHot.decline(
  dependencies // Either a string or an array of strings
);

将依赖模块标记为不可更新(not-update-able)。在处理「依赖的导出正在更新」或「尚未实现处理」时，这是有意义的。取决于你的 HMR 管理代码， 此依赖模块（或其未接受的依赖模块）更新，通常会导致页面被完全重新加载。

五、import.meta.webpackHot.dispose​

module.hot.dispose 添加一个处理函数，在当前模块代码被替换时执行。此函数应该用于移除你声明或创建的任何持久资源。如果要将状态传入到更新过的模块，请添加给定 data 参数。更新后，此对象在更新之后可通过 module.hot.data 调用。

5.1 语法​

module.hot.dispose((data) => {
  // 清理并将 data 传递到更新后的模块...
});

// or
import.meta.webpackHot.dispose((data) => {
  // Clean up and pass data to the updated module...
});

六、import.meta.webpackHot.invalidate​

module.hot.invalidate