Webpack, how to set up hot-reload?

Question

webpack

How to set up hot-reload.
package.json

{
  "name": "list_cars",
  "version": "1.0.0",
  "private": false,
  "scripts": {
    "start": "webpack | webpack-dev-server --mode development --hot --open"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.0",
    "babel-preset-env": "^1.7.0",
    "css-loader": "^1.0.0",
    "style-loader": "^0.23.0",
    "vue": "^2.5.17",
    "vue-loader": "^15.4.1",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.5.17",
    "vuex": "^3.0.1",
    "webpack": "^4.17.1",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.6"
  }
}

webpack.config.js

const path = require('path');
const webpack = require('webpack');
const { VueLoaderPlugin } = require('vue-loader');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve('dist/js'),
        filename: 'index.js'
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                use: 'vue-loader'
            },
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
    ]
};

The problem is that the bundle is recompiled in the console, but the content does not change in the browser.
How to set it up correctly?

Answer 1

package.json:

...
"scripts": {
   "start": "webpack-dev-server --mode development --hot --open"
  },
...

webpack.config.js:

...
  devServer: {
    port: 4200,
    contentBase: path.join(__dirname, 'src/html_templates'),
    watchContentBase: true,
    hot: true
  },
...