ホットモジュールリプレイスメント

ホットモジュールリプレースメントがHotModuleReplacementPluginによって有効になっている場合、そのインターフェースはmodule.hotプロパティとimport.meta.webpackHotプロパティで公開されます。import.meta.webpackHotは厳格なESMでのみ使用できることに注意してください。

通常、ユーザーはインターフェースにアクセスできるかどうかを確認してから、操作を開始します。例として、更新されたモジュールをacceptする方法を以下に示します。

if (module.hot) {
  module.hot.accept('./library.js', function () {
    // Do something with the updated library module...
  });
}

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

次のメソッドがサポートされています...

モジュール API

accept

指定されたdependenciesの更新を受け入れ、それらの更新に反応するcallbackを実行します。さらに、オプションのエラーハンドラーをアタッチできます。

module.hot.accept(
  dependencies, // Either a string or an array of strings
  callback, // Function to fire when the dependencies are updated
  errorHandler // (err, {moduleId, dependencyId}) => {}
);

// or
import.meta.webpackHot.accept(
  dependencies, // Either a string or an array of strings
  callback, // Function to fire when the dependencies are updated
  errorHandler // (err, {moduleId, dependencyId}) => {}
);

ESM importを使用する場合、dependenciesからインポートされたすべてのシンボルは自動的に更新されます。注意: 依存関係の文字列は、importのfrom文字列と正確に一致する必要があります。場合によっては、callbackを省略することもできます。ここでcallbackでrequire()を使用することは意味がありません。

CommonJSを使用する場合は、callbackでrequire()を使用して依存関係を手動で更新する必要があります。ここでcallbackを省略することは意味がありません。

acceptのエラーハンドラー

(err, {moduleId, dependencyId}) => {}

• err: 2番目の引数のコールバック、またはESM依存関係を使用している場合の依存関係の実行中にスローされたエラー。
• moduleId: 現在のモジュールID。
• dependencyId: 変更された（最初の）依存関係のモジュールID。

accept (self)

自身の更新を受け入れます。

module.hot.accept(
  errorHandler // Function to handle errors when evaluating the new version
);

// or
import.meta.webpackHot.accept(
  errorHandler // Function to handle errors when evaluating the new version
);

このモジュールまたは依存関係が更新された場合、親に通知せずに、このモジュールを破棄して再評価できます。これは、このモジュールにエクスポートがない場合（またはエクスポートが別の方法で更新される場合）に意味があります。

このモジュール（または依存関係）の評価が例外をスローした場合、errorHandlerが起動されます。

自己受け入れのエラーハンドラー

(err, {moduleId, module}) => {}

• err: 新しいバージョンの評価時のエラー。
• moduleId: 現在のモジュールID。
• module: 現在のモジュールインスタンス。
  • module.hot: エラーが発生したモジュールインスタンスのHMR APIを使用できるようにします。一般的なシナリオは、それを再度自己受け入れすることです。データを渡すために破棄ハンドラーを追加することも理にかなっています。エラーが発生したモジュールはすでに部分的に実行されている可能性があるため、一貫性のない状態にならないようにしてください。module.hot.dataを使用して、部分的な状態を保存できます。
  • module.exports: オーバーライドできますが、プロパティ名が本番モードでマングルされる可能性があるため、注意してください。

decline

指定されたdependenciesの更新を拒否し、'decline'コードで更新を強制的に失敗させます。

module.hot.decline(
  dependencies // Either a string or an array of strings
);

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

依存関係を更新不可としてフラグを立てます。これは、この依存関係のエクスポートの変更を処理できない場合、または処理がまだ実装されていない場合に意味があります。HMR管理コードによっては、これらの依存関係（または受け入れられていない依存関係）の更新は通常、ページの完全な再読み込みを引き起こします。

decline (self)

自身の更新を拒否します。

module.hot.decline();

// or
import.meta.webpackHot.decline();

このモジュールを更新不可としてフラグを立てます。これは、このモジュールに不可逆的な副作用がある場合、またはこのモジュールに対してHMR処理がまだ実装されていない場合に意味があります。HMR管理コードによっては、このモジュール（または受け入れられていない依存関係）の更新は通常、ページの完全な再読み込みを引き起こします。

dispose (または addDisposeHandler)

現在のモジュールコードが置き換えられたときに実行されるハンドラーを追加します。これは、あなたが要求または作成した永続的なリソースを削除するために使用する必要があります。状態を更新されたモジュールに転送する場合は、指定されたdataパラメーターに追加します。このオブジェクトは、更新後にmodule.hot.dataで使用できるようになります。

module.hot.dispose((data) => {
  // Clean up and pass data to the updated module...
});

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

invalidate

このメソッドを呼び出すと、現在のモジュールが無効になり、HMR更新が適用されると破棄されて再作成されます。これは、このモジュールの通常の更新のように伝播します。invalidateをこのモジュールで自己受け入れすることはできません。

idle状態中に呼び出されると、このモジュールを含む新しいHMR更新が作成されます。HMRはready状態になります。

readyまたはprepare状態中に呼び出されると、このモジュールは現在のHMR更新に追加されます。

check状態中に呼び出されると、更新が利用可能な場合、このモジュールは更新に追加されます。更新が利用できない場合は、新しい更新が作成されます。HMRはready状態になります。

disposeまたはapply状態中に呼び出されると、HMRはこれらの状態から抜け出した後にそれを取得します。

ユースケース

条件付きの受け入れ

モジュールは依存関係を受け入れることができますが、依存関係の変更が処理できない場合はinvalidateを呼び出すことができます。

import { x, y } from './dep';
import { processX, processY } from 'anotherDep';

const oldY = y;

processX(x);
export default processY(y);

module.hot.accept('./dep', () => {
  if (y !== oldY) {
    // This can't be handled, bubble to parent
    module.hot.invalidate();
    return;
  }
  // This can be handled
  processX(x);
});

条件付き自己受け入れ

モジュールは自身を自己受け入れできますが、変更が処理できない場合は自身を無効にすることができます。

const VALUE = 'constant';

export default VALUE;

if (
  module.hot.data &&
  module.hot.data.value &&
  module.hot.data.value !== VALUE
) {
  module.hot.invalidate();
} else {
  module.hot.dispose((data) => {
    data.value = VALUE;
  });
  module.hot.accept();
}

カスタムHMR更新のトリガー

const moduleId = chooseAModule();
const code = __webpack_modules__[moduleId].toString();
__webpack_modules__[moduleId] = eval(`(${makeChanges(code)})`);
if (require.cache[moduleId]) {
  require.cache[moduleId].hot.invalidate();
  module.hot.apply();
}

removeDisposeHandler

disposeまたはaddDisposeHandlerを介して追加されたハンドラーを削除します。

module.hot.removeDisposeHandler(callback);

// or
import.meta.webpackHot.removeDisposeHandler(callback);

管理 API

status

ホットモジュールリプレースメントプロセスの現在のステータスを取得します。

module.hot.status(); // Will return one of the following strings...

// or
import.meta.webpackHot.status();

fail

更新が例外をスローし、システムの状態が損なわれました

module.hot
  .check(autoApply)
  .then((outdatedModules) => {
    // outdated modules...
  })
  .catch((error) => {
    // catch errors
  });

// or
import.meta.webpackHot
  .check(autoApply)
  .then((outdatedModules) => {
    // outdated modules...
  })
  .catch((error) => {
    // catch errors
  });

check

ロードされたすべてのモジュールを更新についてテストし、更新が存在する場合は、それらをapplyします。

autoApplyパラメーターは、ブール値または、呼び出し時にapplyメソッドに渡すoptionsのいずれかになります。

module.hot
  .apply(options)
  .then((outdatedModules) => {
    // outdated modules...
  })
  .catch((error) => {
    // catch errors
  });

// or
import.meta.webpackHot
  .apply(options)
  .then((outdatedModules) => {
    // outdated modules...
  })
  .catch((error) => {
    // catch errors
  });

apply

• 更新プロセスを続行します（module.hot.status() === 'ready'である限り）。
• オプションのoptionsオブジェクトには、次のプロパティを含めることができます
• ignoreUnaccepted (boolean): 受け入れられていないモジュールへの変更を無視します。
• ignoreDeclined (boolean): 拒否されたモジュールへの変更を無視します。
• ignoreErrored (boolean): acceptハンドラー、エラーハンドラー、およびモジュールの再評価中にスローされたエラーを無視します。
• onDeclined (function(info)): 拒否されたモジュールに対する通知機能
• onUnaccepted (function(info)): 受け入れられていないモジュールに対する通知機能
• onAccepted (function(info)): 受け入れられたモジュールに対する通知機能

onDisposed (function(info)): 破棄されたモジュールに対する通知機能

{
  type: 'self-declined' | 'declined' |
        'unaccepted' | 'accepted' |
        'disposed' | 'accept-errored' |
        'self-accept-errored' | 'self-accept-error-handler-errored',
  moduleId: 4, // The module in question.
  dependencyId: 3, // For errors: the module id owning the accept handler.
  chain: [1, 2, 3, 4], // For declined/accepted/unaccepted: the chain from where the update was propagated.
  parentId: 5, // For declined: the module id of the declining parent
  outdatedModules: [1, 2, 3, 4], // For accepted: the modules that are outdated and will be disposed
  outdatedDependencies: { // For accepted: The location of accept handlers that will handle the update
    5: [4]
  },
  error: new Error(...), // For errors: the thrown error
  originalError: new Error(...) // For self-accept-error-handler-errored:
                                // the error thrown by the module before the error handler tried to handle it.
}

onErrored (function(info)): エラーに対する通知機能

infoパラメーターは、次の値の一部を含むオブジェクトになります

module.hot.addStatusHandler((status) => {
  // React to the current status...
});

// or
import.meta.webpackHot.addStatusHandler((status) => {
  // React to the current status...
});

addStatusHandler

statusの変更をリッスンする関数を登録します。

ステータスハンドラーがPromiseを返す場合、HMRシステムはPromiseが解決されるまで続行しないことに注意してください。

module.hot.removeStatusHandler(callback);

// or
import.meta.webpackHot.removeStatusHandler(callback);