HMR не обновляет страницу в браузере
Webpack собирает проект, но страница в браузере не перезагружается
Для написания сервера используется Express.js
server.js
const express = require('express'),
app = express(),
config = require('../dev/webpack.dev.config'),
compiler = require('webpack')(config),
history = require('connect-history-api-fallback'),
PORT = 3000;
app.use(history());
app.use(require('webpack-dev-middleware')(compiler, {
publicPath: config.output.publicPath
}))
app.use(require('webpack-hot-middleware')(compiler, { reload: true }));
app.listen(PORT, (err) => {
if (err) {
console.error(err);
} else {
console.log(`Server listening on port ${PORT}`)
}
})
webpack.dev.config.js
const path = require('path'),
VueLoaderPlugin = require('vue-loader/lib/plugin'),
HtmlWebpackPlugin = require('html-webpack-plugin'),
webpack = require('webpack');
module.exports = {
mode: "development",
entry: "./src/index.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, '../dist'),
publicPath: "/"
},
devServer: {
contentBase: './dist',
hot: true,
port: 3000
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.vue$/,
loader: 'vue-loader'
},
],
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js',
},
},
plugins: [
new VueLoaderPlugin,
new HtmlWebpackPlugin({
template: './src/index.template.html'
}),
new webpack.HotModuleReplacementPlugin()
],
}