Webpack 5 live reload

Question

I updated webpack 4 to webpack 5, after which everything works, except for updating the browser (live reload) who can tell the reason? here is my config.

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const autoprefixer = require('autoprefixer');

module.exports = (env, argv) => {
  const { mode = 'development' } = argv;
  const isProd = mode === 'production';
  const isDev = mode === 'development';

  const getStyleLoaders = () => {
    return [isProd ? MiniCssExtractPlugin.loader : 'style-loader'];
  };
  return {
    context: path.resolve(__dirname, 'src'),
    mode: isProd ? 'production' : isDev && 'development',
    entry: './index.js',
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: isDev ? 'script/script.js' : 'script/bundle-[hash:8].js',
      publicPath: '/',
    },
    resolve: {
      extensions: ['.js'],
    },
    devServer: {
      contentBase: path.join(__dirname, 'dist'),
      publicPath: '/',
      open: true,
      watchContentBase: true,
      port: 8080,
    },
    devtool: isProd ? false : 'source-map',
  };
};

Answer 1

You need to set {target: 'web'} in your Webpack config and also make sure to run your dev server like this: webpack serve --mode development --env development

Answer 2

live reload will only work if the webpack bundle target is 'web', so adding this line to webpack.config will make it work:

target: 'web'

Still, for the time this is being written, there is a bug in webpack-dev-server@3 that prevents live reload when target is an array that contains 'web': https://github.com/webpack/webpack-dev-server/pull/3271

so you can't do that:

target: ['web', 'es5']

maybe one can use this workaround...

target: isProduction ? ['web', 'es5'] : 'web'