How to set up livereload webpack 5?

Question

webpack

With webpack 4, everything worked, but with the new version, changes in files are not tracked.

package.json

{
  "name": "mevn-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "engines": {
    "node": "12.19.0"
  },
  "scripts": {
    "start": "node ./src/server/index.js",
    "build": "webpack --mode production",
    "dev": "webpack serve --mode development",
    "ndm": "nodemon -r dotenv/config ./src/server/index.js",
    "ndmg": "node nodemon-ngrok.js",
    "env": "node ./config/send-env.js"
  },
  "nodemonConfig": {
    "ignore": [
      "client/**"
    ]
  },
  "keywords": [],
  "author": "NAME",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.12.3",
    "@babel/preset-env": "^7.12.1",
    "@vue/cli-plugin-babel": "^4.5.8",
    "@vue/cli-plugin-eslint": "^4.5.8",
    "@vue/cli-plugin-router": "^4.5.8",
    "@vue/cli-service": "^4.5.8",
    "@vue/compiler-sfc": "^3.0.2",
    "@vue/eslint-config-prettier": "^6.0.0",
    "autoprefixer": "^10.0.1",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.1.0",
    "cname-webpack-plugin": "^3.0.0",
    "compression-webpack-plugin": "^6.0.3",
    "copy-webpack-plugin": "^6.2.1",
    "css-loader": "^5.0.0",
    "cssnano": "^4.1.10",
    "eslint": "^7.12.0",
    "eslint-plugin-vue": "^7.1.0",
    "file-loader": "^6.1.1",
    "html-loader": "^1.3.2",
    "html-webpack-plugin": "^4.5.0",
    "image-webpack-loader": "^7.0.1",
    "mini-css-extract-plugin": "^1.2.0",
    "ngrok": "^3.3.0",
    "node-sass": "^4.14.1",
    "nodemon": "^2.0.6",
    "postcss-loader": "^4.0.4",
    "prettier": "^2.1.2",
    "prettier-webpack-plugin": "^1.2.0",
    "sass-loader": "^10.0.4",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "vue-loader": "^15.9.3",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^5.2.0",
    "webpack-cli": "^4.1.0",
    "webpack-dev-server": "^3.11.0",
    "webpack-node-externals": "^2.5.2"
  },
  "dependencies": {
    "@babel/plugin-proposal-class-properties": "^7.12.1",
    "@babel/plugin-proposal-decorators": "^7.12.1",
    "axios": "^0.21.0",
    "babel-polyfill": "^6.26.0",
    "body-parser": "^1.19.0",
    "config": "^3.3.2",
    "core-js": "^3.6.5",
    "cors": "^2.8.5",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "mongoose": "^5.10.10",
    "vue": "^2.6.12",
    "vue-router": "^3.4.7"
  }
}

webpack.config.js

const HTMLWebpackPlugin = require("html-webpack-plugin"),
  webpack = require("webpack"),
  path = require("path"),
  { join } = path,
  { VueLoaderPlugin } = require("vue-loader"),
  { HotModuleReplacementPlugin } = require("webpack");

module.exports = {
  mode: "development",
  entry: "./src/client/index.js",
  output: {
    path: path.resolve("docs"),
    filename: "[name].bundle.js",
  },
  devServer: {
    port: 8080,
    hot: true,
    open: true,
    historyApiFallback: true,
    overlay: true,
    contentBase: path.resolve(__dirname, "docs"),
    watchContentBase: true,
    compress: true,
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: "babel-loader",
        options: {
          presets: ["@babel/preset-env"],
        },
      },
      {
        test: /\.vue$/,
        loader: "vue-loader",
        options: {
          loaders: {
            scss: "vue-style-loader!css-loader!sass-loader", // <style lang="scss">
            sass: "vue-style-loader!css-loader!sass-loader?indentedSyntax", // <style lang="sass">
          },
        },
      },
      {
        test: /\.s(c|a)ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
    ],
  },
  resolve: {
    extensions: [".js", ".vue", ".json"],
  },
  plugins: [
    new HotModuleReplacementPlugin(),
    new VueLoaderPlugin(),
    new HTMLWebpackPlugin({
      showErrors: true,
      cache: true,
      title: "Vue with webpack",
      favicon: join(__dirname, "\\src\\client\\favicon.ico"),
      template: join(__dirname, "\\src\\client\\index.html"),
    }),
    new HotModuleReplacementPlugin(),
  ],
};

project structure

Answer 1

Try adding to webpack.config.js. Helped me https://github.com/webpack/webpack-dev-server/issu... https://stackoverflow.com/questions/64474426/webpa...
target: 'web',