请问配置完 HMR，console 中消息因何重复打印？

Question

如图，想请问因何产生了这种情况，VM1160__log.js:23 与 log.js: 23 各自打印一遍

或者也可以说，VM 为何会多开了这么一条 socket，该如何解决？

新版本 create-react-app 已经可以通过在 index.js 加入下面语句，开启不保留状态的 HMR 模式

if (module.hot) {
  module.hot.accept();
}

在执行 eject 后尝试看过源码，直到目前还没看出个所以然来

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { AppContainer } from 'react-hot-loader';


if (module.hot) {
  module.hot.accept();
}

ReactDOM.render(
  <AppContainer>
    <App name='igoist' />
  </AppContainer>,
  document.getElementById('app')
);

webpack.config.js

/* global __dirname */
const path = require('path');
// const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const publicPath = '/';

module.exports = [
  {
    devtool: 'eval',

    entry: {
      index: [
        'react-hot-loader/patch',
        // 'webpack/hot/only-dev-server', // It's removed in latest version ?
        path.resolve(__dirname, 'src/index.js'),
      ]
    },

    output: {
      filename: '[name].bundle.min.js',
      path: path.resolve(__dirname, 'dist/'),
      publicPath
    },

    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          loaders: ['babel-loader', 'eslint-loader'],
          include: [path.join(__dirname, publicPath + 'src')]
        },
      ]
    },

    plugins: [
      // new webpack.optimize.UglifyJsPlugin({
      //   compress: {
      //       warnings: false
      //   }
      // })
      new HtmlWebpackPlugin({
        template: __dirname + '/public/index.html'
      }),
      // new webpack.HotModuleReplacementPlugin() // if the '--hot' option has been indicated, then you don't need this one
      // new webpack.DefinePlugin({
      //   'process.env': {
      //     'NODE_ENV': '"production"'
      //   }
      // })
    ],

    devServer: {
      contentBase: './dist',
      port: 1188,
      publicPath,
      // historyApiFallback: true,
      inline: true,
      // hot: true,  // 这参数与 --hot 与插件 3 者间关系 -- now 'hot' is deprecated
      hotOnly: true
    }
  },
];

使用了非 Node 的方式配置了 HMR，在 html 模板中引入了相应 bundle

Answer 1

自问自答。

年假休息了一星期，重新开始写代码

重新起了个新的项目模板，一对比，很快就想到了原因

还记得 HtmlWebpackPlugin 吗？

Bug 所在：/public/index.html 中手动引入了 index.bundle.min.js

太粗心了

Answer 2

很显然，你在这里执行了两遍render:

if (module.hot) {
  module.hot.accept(() => {
    render(); // 这是第2遍
  });
}

const render = () => {
  ReactDOM.render(
    <AppContainer>
      <App name='igoist' />
    </AppContainer>,
    document.getElementById('app')
  );
};

render(); // 这是第1遍