У меня 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")
}
};
