Webpack-dev-server not hot reloading

Question

We recently upgraded to NodeJS 20, and had to upgrade a bunch of other things. We updated from vue/cli-service 4 -> 5 and from Webpack 4 -> 5, which changed our webpack-dev-server to v4

The problem we are facing is running our dev server via vue-cli-service serve. It starts up fine with no errors on port 8888, and when we make changes to a .vue file it says:

WAIT Compiling...
3:14:59 PM

Compiling...

DONE Compiled successfully in 590ms
3:15:00 PM

App running at:

• Local: http://localhost:8888/
• Network: http://localhost:8888/

The main problem is that when I visit the page that I changed on port 8888 locally, it doesn't show the change. This all worked correctly before the upgrade. I followed the webpack-dev-server migration guide and I believe I corrected everything. I'm including the before and after of my vue.config.js files.

Here are my config files.

webpack.config.js

const webpack = require('webpack');
    
    module.exports = {
      module: {
        rules: [
          {
            test: /\.scss$/,
            use: [
              'vue-style-loader',
              'css-loader',
              'sass-loader',
            ],
          },
        ],
      },
      mode: 'development',
    
      plugins: [
        new webpack.DefinePlugin({
          'process.env.NODE_ENV': JSON.stringify('production'),
        }),
      ],
    
    };

vue.config.js (pre-migration, webpack-dev-server 3.x.x)

const path = require('path');
const WebpackAssetsManifest = require('webpack-assets-manifest');
const packageJSON = require('./package.json');
const outputDirectory = `target/classes/dist/${packageJSON.name}/vue`;

module.exports = {
  assetsDir: 'static',
  lintOnSave: true,
  // Use a relative path for assets
  publicPath: process.env.NODE_ENV === 'production' ? '/vue/' : '/',

  outputDir: outputDirectory,
  productionSourceMap: false,
  transpileDependencies: ['vue-resource'],
  devServer: {

    proxy: {
      '/': {
        target: 'http://localhost:8081/', // this configuration needs to correspond to the Spring Boot backends' application.properties server.port
        ws: true,
        changeOrigin: true,
      },
    },

    disableHostCheck: true,
    writeToDisk: true,
    port: 8888,
    contentBase: [
      path.join(__dirname, 'public'),
    ],
  },
  chainWebpack: (config) => {
    config.optimization.splitChunks({
      chunks: 'all',
    });

    // Register the webpack-assets-manifest plugin to generate an asset manifest
    config
      .plugin('assets-manifest')
      .use(WebpackAssetsManifest);
  },
  css: {
    extract: {
      filename: 'css/[name].css',
    },
  },
  configureWebpack: {
    output: {
      filename: 'js/[name].js',
    },
    resolve: {
      alias: {
        vue$: 'vue/dist/vue.esm.js',
      },
    },

  },
};

vue.config.js (post-migration, webpack-dev-server 4.x.x)

const path = require('path');
const WebpackAssetsManifest = require('webpack-assets-manifest');
const packageJSON = require('./package.json');
const outputDirectory = `target/classes/dist/${packageJSON.name}/vue`;

module.exports = {
  assetsDir: 'static',
  lintOnSave: true,
  // Use a relative path for assets
  publicPath: process.env.NODE_ENV === 'production' ? '/vue/' : '/',

  outputDir: outputDirectory,
  productionSourceMap: false,
  transpileDependencies: ['vue-resource'],
  devServer: {
    port: 8888,
    proxy: {
      '/': {
        target: 'http://localhost:8081/', // this configuration needs to correspond to the Spring Boot backends' application.properties server.port
        ws: true,
        changeOrigin: true,
        secure: false,
        logLevel: 'debug',
      },
    },
    allowedHosts: 'all',
    devMiddleware: {
      index: false,
      writeToDisk: true,
    },
    static: {
      directory: path.join(__dirname, 'public/'),
    },
    open: { // Opens browser in incognito mode
      app: {
        name: 'chrome',
        arguments: ['--incognito'],
      },
    },
  },
  chainWebpack: (config) => {
    config.optimization.splitChunks({
      chunks: 'all',
    });

    // Register the webpack-assets-manifest plugin to generate an asset manifest
    config
      .plugin('assets-manifest')
      .use(WebpackAssetsManifest);
  },
  css: {
    extract: {
      filename: 'css/[name].css',
    },
  },
  configureWebpack: {
    output: {
      filename: 'js/[name].js',
    },
    resolve: {
      alias: {
        vue$: 'vue/dist/vue.esm.js',
      },
    },
  },
};

Answer 1

Solved! I tried many configurations, and adding this to the devMiddleware worked:

devMiddleware: {
  publicPath: "/",
  index: true,
  writeToDisk: true,
},

Adding the publicPath and changing index to true did the trick. Thanks everyone!