Webpack構成hot HotModuleReplacementPluginを構成する必要があるかどうか

3661 ワード

Webpack構成hot HotModuleReplacementPluginを構成する必要があるかどうか
Webpack公式ドキュメント(devserverhot)では、hmrを使用する場合、2つの条件を満たす必要があります.
  • devServerを構成します.hotはtrue
  • webpackを構成する.HotModuleReplacementPluginプラグイン
  • Note that webpack.HotModuleReplacementPlugin is required to fully enable HMR. If webpack or webpack-dev-server are launched with the --hot option, this plugin will be added automatically, so you may not need to add this to your webpack.config.js *.
    注意:webpackはHMRを完全に有効にするにはwebpack.HotModuleReplacementPluginを使用する必要があります.Webpackまたはwebpack-dev-serverがコマンドライン追加--hotオプションで起動すると、このプラグインは自動的に追加されるので、webpackに追加する必要はありません.config.js中
    しかし、実際にwebpack-dev-serverを使用すると、webpack.config.jsにはdevServer.hot:trueしか配置されていないが,このプラグインが追加されていない状態ではHMRが実現されている.
    Webpack-dev-serverの内部で自動的にこのことを完成させてくれたのか.
    Githubのwebpack-dev-serverで検索すると、次のコード(ソースアドレス)が見つかります.
    if (options.hot || options.hotOnly) {
      config.plugins = config.plugins || [];
      if (
        !config.plugins.find(
          // Check for the name rather than the constructor reference in case
          // there are multiple copies of webpack installed
          (plugin) => plugin.constructor.name === 'HotModuleReplacementPlugin'
        )
      ) {
        config.plugins.push(new webpack.HotModuleReplacementPlugin());
      }
    }
    

    コードは、構成されたプラグインにHotModuleReplacementPluginというプラグインが含まれているかどうかを判断し、なければ追加します.
    検索結果のCommits:fix:check for name of HotModuleReplacementPlugin to avoid RangeError#2146を再確認
    このコードはまだ調整されており,調整前の判断の根拠はconstructorであり,調整後はnameで判断する.
    これで、Webpack-dev-sever内部でH o t M o d u l e ReplacementPluginプラグインが判断され、devServer.hot:trueが構成されている場合、このプラグインが自動的に追加されることになりました.
    ただし、Webpackソースコードでは同様の操作が検出されていないため、他のツールを使用してサーバを有効にし、HMRをオンにする場合は、手動でプラグインを追加する必要があります.
    PS:自分で検証してみる必要があるかもしれません