Webpack 5 live reload

user_11181772 0
Viewed 11165

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',
  };
};
webpack frontend javascript
10 Answers

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

user_11251730

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'
user_3149050

I am not sure if this could be related to your problem, but what version of webpack-cli are you using? Some are reporting this problem with webpack-dev-server due to webpack-cli v4.0.0:

Error: Cannot find module 'webpack-cli/bin/config-yargs' #2759

If you are having this problem, you could try downgrading webpack-cli to version: 3.3.0 (exact) and webpack-dev-server down to version: ^3.11.0.

user_144575990

I had the same problem with webpack v5.39.0, webpack-cli v4.7.2 webpack-dev-server v3.11.2 My way:

npm install -D webpack-dev-server@4.0.0-beta.0

module.exports ={target: "web"} in config

and "start": "webpack serve" in package.json

user_162378490

i had same error this is what fixed it:

first

setting {target: 'web'} in the Webpack config

second

under devServer config set: publicPath: "/assets/",

my config will:

    module.exports = {
    target: “web”,
    entry: {
    main: path.resolve(__dirname, “./src/index.js”)
    },
    output: {
    path: __dirname + “/dist/assets”,
    filename: “bundle.js”,
    publicPath: “assets”
    },
    mode: “development”,
    devServer: {
    open: true,
    contentBase: “./dist”,
    publicPath: “/assets/”,
    port: 3000,
    hot: false,
    watchContentBase: true
    }}
user_45209640

I had the same error. Here's how I solved it.

  1. Add { target: 'web' }
  2. Add { devServer: { hot: false, watchContentBase: true }}
  3. Remove { devServer: { historyApiFallback: true }}
  4. Result:

module.exports = {
  mode: 'development',
  target: 'web',
  entry: './src/app/main.ts',
  output: {
    path: paths.dist,
    filename: 'js/main.min.js?[fullhash]',
  },
  devServer: {
    open: true,
    overlay: true,
    contentBase: paths.dist,
    port: 8080,
    host: '0.0.0.0',
    hot: false,
    watchContentBase: true,
  }
}

Start script:

"scripts": {
  "dev": "webpack serve --mode development",
}

Start command:

 npm run dev

My default browser open automatically on http://localhost:8080

When I edit my pug file, I see the result in browser.

user_146034130

I was facing the same issue with webpack-dev-server v4.8.1 and this worked for me:-

devServer: {
    static: {
      directory: path.join(__dirname, 'dist'),
    },
    open:true,
    compress: true,
    port: 9000,
    hot:false
 },
user_189572100

I found this solution in the official documentation: devserverwatchfiles

Use devServer.watchFiles

This option allows you to configure a list of globs/directories/files to watch for file changes.

For example:

webpack.config.js

module.exports = {
  //...
  devServer: {
    watchFiles: ['src/**/*'],
  },
};
user_95862300

for webpack 5 you need to add static key to path where your app source code lies

devServer: {
    open: true,
    hot: true,
    static: {
      directory: path.join(__dirname, "src"),
    },
  },
user_51224980

I was having a similar issue of live reload "not working": webpack would detect the changes to my code, but when it reloaded the page, the old version of the UI would still be displayed. I had this configuration for my dev server:

  devServer: {
    port: 8080,
    hot: true,
    static: {
      directory: path.join(__dirname, "public"), 
    },
    liveReload: true,
    watchFiles: [ path.join(__dirname, 'src/**/*') ]
  },

Then I set the 'cache' option to false (outside of the devServer options) and it worked:

cache: false,

For some reason the browser was keeping the cached version of my code even though I was making changes and it was reloading after I made those changes. However, I have another project with the exact same webpack config that works without needing cache set to false, so this may not be the best solution as it can cause slower build times in larger projects. It did the job though

user_152918390
Related