CODEWITHSUNDEEP
webpackwebpack-dev-server
RemiM
RemiM

Reputation: 407

Webpack 5 dev server does not reload on file changes

I'm very new to webpack so please be indulgent but I can't figure out why it is not reloading the page when a modification is detected. With some old version of webpack just running webpack-dev-server was enough but with these latest versions I can't get there.

Here is my config :

const path = require('path')
 
module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'public/scripts'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
          {
            test: /\.m?js$/,
            exclude: /node_modules/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: [
                  ['@babel/preset-env']
                ]
              }
            }
          }
        ]
    },
    target: ['web', 'es5'],
    devServer: {
      contentBase: path.resolve(__dirname, 'public'),
      watchContentBase: true
    },
    devtool: 'source-map'
}

Here is my script :

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

versions I'm running :

"webpack": "^5.11.0",
"webpack-cli": "^4.3.0",
"webpack-dev-server": "^3.11.0"

thank you for your help

Upvotes: 5

Views: 7198

Answers (2)

Mehrdad Dehghanzadeh
Mehrdad Dehghanzadeh

Reputation: 1

target: 'web',
devServer: {hot: false}

see document webpack DevServer

Upvotes: 0

odddemid
odddemid

Reputation: 31

You need to update webpack-dev-server, installed version is not supported by webpack 5.

npm install --save-dev webpack-dev-server@next

I also highly recommend that you familiarize yourself with Release Note.

Be careful the update contains many BREAKING CHANGES!

Upvotes: 3

Related Questions