Webpack構成hot HotModuleReplacementPluginを構成する必要があるかどうか
3661 ワード
Webpack構成hot HotModuleReplacementPluginを構成する必要があるかどうか
Webpack公式ドキュメント(devserverhot)では、hmrを使用する場合、2つの条件を満たす必要があります. devServerを構成します.hotはtrue webpackを構成する.HotModuleReplacementPluginプラグイン Note that
注意:webpackはHMRを完全に有効にするには
しかし、実際にwebpack-dev-serverを使用すると、webpack.config.jsには
Webpack-dev-serverの内部で自動的にこのことを完成させてくれたのか.
Githubのwebpack-dev-serverで検索すると、次のコード(ソースアドレス)が見つかります.
コードは、構成されたプラグインに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プラグインが判断され、
ただし、Webpackソースコードでは同様の操作が検出されていないため、他のツールを使用してサーバを有効にし、HMRをオンにする場合は、手動でプラグインを追加する必要があります.
PS:自分で検証してみる必要があるかもしれません
Webpack公式ドキュメント(devserverhot)では、hmrを使用する場合、2つの条件を満たす必要があります.
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:自分で検証してみる必要があるかもしれません