Webpack 3 and react-hot-loader. How to make friends?

Question

React

Can you tell me how to connect the second one to the first one?

Answer 1

My hot-reload started like this. I spent the day googling, where the hell is the normal tutorial.
package.json

...
"scripts": {
  "start": "node server.js"
}
...

server.js

var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');

new WebpackDevServer(webpack(config), {
  publicPath: config.output.publicPath,
  hot: true,
  historyApiFallback: true
}).listen(3000, 'localhost', function (err, result) {
  if (err) {
    return console.log(err);
  }

  console.log('Listening at http://localhost:3000/');
});

webpack.config.js

const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ScriptExtHtmlWebpackPlugin = require("script-ext-html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");

module.exports = {
  entry: {
    app: [
      'webpack-dev-server/client?http://0.0.0.0:3000', // WebpackDevServer host and port
    	'webpack/hot/only-dev-server', // "only" prevents reload on syntax errors
      "./app/index.js"
    ]
  },
  devtool: "inline-source-map",
  devServer: {
    port: 3000
  },
  resolve: {
    extensions: [".jsx", ".js"]
  },
  module: {
    loaders: [
      {
        test: /\.jsx$/,
        loader: 'babel-loader',
        exclude: "/node_modules/",
        query: {
          presets: ["react"]
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./index.html",
      inject: "head"
    }),
    new ScriptExtHtmlWebpackPlugin({
      defer: [],
      defaultAttribute: 'defer'
    }),
    new webpack.HotModuleReplacementPlugin()
  ],
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist")
  }
};