javascript - この基本的な webpack のホット モジュールの交換が機能するのはなぜですか?

Question

Dan Abramov によるこのMedium の投稿を読んだ後、webpack を使用して非常に基本的な HMR (react-hot-loader なし) を試しました。

エントリindex.js

import React from 'react';
import { render } from 'react-dom';

import App from './App';

if(module.hot) {
  // Basic HMR for React without using react-loader

  // module.hot.accept('./App', () => {
  //   const UpdatedApp = require('./App').default;
  //
  //   render(<UpdatedApp />, document.getElementById('app'));
  // });

  // Why does this work as well?
  module.hot.accept();
}

render(<App />, document.getElementById('app'));

ウェブパックの設定

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');

module.exports = {
  entry: [
    'webpack-dev-server/client?http://localhost:8081',
    'webpack/hot/only-dev-server',
    './src/js/index.js'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: [{ loader: 'babel-loader' }]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({ template: 'src/index.html' }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin()
  ],
  devServer: {
    hot: true
  }
}

私の質問は、なぜ React アプリの HMR が単に で動作するのmodule.hot.accept()ですか?

私の理解では、webpack の HMR は、ファイルの変更を検出するための単純な API のみを提供します。これらの変更を処理する方法は、ローダーによって異なります。スタイルローダーは.cssファイルを処理します。また、React アプリのコンテキストでは、.jsモジュールへの変更は react-hot-loader によって管理される場合があります。

または、Medium postに従って、次のように管理できます。

render(<UpdatedApp />, document.getElementById('app'))

では、なぜ実行するだけで実行module.hot.accept()と同じ結果が得られるのrender(<UpdatedApp />, document.getElementById('app'))でしょうか?

パッケージのバージョン

"webpack": "^3.10.0",
"webpack-dev-server": "^2.9.7"