Webpack 3 и react-hot-loader. Как подружить?

Question

[Muvka]

Подскажите, как правильно прикрутить второе к первому?

Answer 1

[Negwereth]

У меня hot-reload завёлся так. День потратил на гугление, хрен где нормальный туториал есть.

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")
	}
};