ホットモジュール交換/ホットアップデートHMR

（1）ホットモジュールの交換（ホットモジュールの交換）

効果：

cssのデバッグが簡単で、ページが更新されません
モジュールが変更され、モジュールが部分的に変更されたjs、ページが更新されない

例：開発中、背景色が赤だったので、緑に変更しました。変更後、変更した要素の背景が直接赤から緑に変わることを願っています。ページ全体を更新しないでください。現時点では、ウェブパックの熱を使用する必要があります。更新（HMR）、プロジェクトで構成する必要があります。ページの元の要素がまだ存在し、CSSスタイルのみが変更され、HMRを使用するときが来たことを願っています。

（1）HMRはHotModuleReplacementPluginプラグインを使用する必要があります。このプラグインはwebpackに付属するプラグインであり、最初にwebpackを導入します。

（2）devServerでhotをtrueとして構成します

（3）プラグインでHMRプラグインを構成します

さて、cssの変更に関するページを更新せずにホットアップデート構成を構成できるので、自分で試すことができます

シグナルはページがレンダリングされるとすぐに表示されます。network-work-Docはlocalhostを要求します。クリアすると、赤が緑に変わり、Docがlocalhostを再要求して、ページが実際に更新されていないことを確認します。

js：エントリjs

import './index.css'
var dom = document.createElement('div')
document.body.appendChild(dom)

index.css：

div {
  width: 300px;
  height: 300px;
  background-color: red; // 验证时更改了这个
}

cssの変更は、ページを更新せずに実行されます。

jsを再度構成しましょう：HMRを介したjsの結果は、ページも更新されない場合、どのモジュールが変更され、どのモジュールのみがリロードされ、他のモジュールはリロードされる必要がないということです。

例：

noChange.js：

export default function noChange () {
  var dom = document.getElementById('app')
  dom.innerHTML = 2200
}

number.js：

export default function number () {
  var count = 0
  var dom = document.createElement('div')
  dom.innerHTML = count
  dom.onclick = function () {
    count++
    dom.innerHTML = count
  }
  document.body.appendChild(dom)
}

index.js

import number from './number.js'
import noChange from './noChange.js'

number()
noChange()

// 如果开启了热更新
if (module.hot) {
  module.hot.accept('./noChange', () => { // 当noChange文件代码变化了 执行回调函数的内容
    noChange()
  })
}

このようにして、ページを更新せずに#appのコンテンツを変更でき、ページは番号でクリックされた番号を保持できます

（2）小さな質問：CSSが追加の構成なしで自動的に有効になるのはなぜですか？jsにはまだmodule.hot.acceptが必要ですか？

cssファイルのために、我々はCSSを設定します-loader。サポートが-loader追加されていCSS module.hot.accept、それが設定されていないので、場合でも、module.hot.accept、HMRはCSSのために使用することができますが、JSが呼び出されない場合module.hot.accept、ページは、直接リフレッシュされる、HMRの実行は、対応するコンテンツを見つけることができないとパラメータを設定することができますhotOnly: true自動更新を防ぐには

（3）要約：

HMR（ホットモジュール交換）、モジュールの追加または変更（JS / CSSの変更）後、ブラウザのコンテンツは更新されない方法で自動的に更新され、開発効率が向上します。HMRは[開発環境]でのみ使用する必要があることに注意してください。

HMRが正常に構成された後、CSS / JSはページを更新するように変更されません（ファイルの変更を保存するときにブラウザーのタブページが自動的に更新されるかどうかに注意してください）。

HMR構成には、次の4つの重要なポイントがあります。

webpack-dev-serverサーバースタートとして使用

webpack.configdevServer設定hot: true

webpack.configプラグインが増加しますHotModuleReplacementPlugin

module.hot.acceptHMRコードを増やすために使用します

さて、花は終わりました〜

ホットモジュール交換/ホットアップデートHMR

おすすめ