Why is webpack watch not updating my code?

Question

I recently updated my project to webpack v5, but I can't get the watch option to work anymore. It is watching the files, and reacts when files change, but the output is never updated. Everything builds when I start the watch, but not when I make changes.

I'm using these versions:

"webpack": "^5.1.0",
"webpack-cli": "^4.0.0",

Here is my webpack config file (webpack.config.dev.js):

const path = require('path')

module.exports = {
  mode: 'development',
  devtool: 'cheap-module-source-map',
  entry: {
    'front-js': path.resolve(__dirname, 'src/js/front/front.js')
  },
  output: {
    filename: '[name].min.js?ver=[contenthash:8]',
    path: path.resolve(__dirname, 'dist')
  }
}

Here is what I'm running:

webpack --config webpack.config.dev.js --watch

And here is an example output in the terminal when I change the front.js file:

Compilation  starting…

(node:9623) [DEP_WEBPACK_WATCH_WITHOUT_CALLBACK] DeprecationWarning: A 'callback' argument need to be provided to the 'webpack(options, callback)' function when the 'watch' option is set. There is no way to handle the 'watch' option without a callback.

Compilation  finished

asset front-js.min.js?ver=0300de4a 57.3 KiB [emitted] [immutable] (name: front-js)
orphan modules 10.7 KiB [orphan] 5 modules
runtime modules 997 bytes 4 modules
modules by path ./src/js/front/ 32 KiB
  ./src/js/front/front.js 888 bytes [built] [code generated]
  ./src/js/front/modules/customSelect.js 5.13 KiB [built] [code generated]
  ./src/js/front/modules/forms.js 3.51 KiB [built] [code generated]
  ./src/js/front/modules/header.js 7.56 KiB [built] [code generated]
  ./src/js/front/modules/iframeComm.js 1020 bytes [built] [code generated]
  ./src/js/front/modules/scrollListener.js 377 bytes [built] [code generated]
  ./src/js/front/modules/lazy.js 1.58 KiB [built] [code generated]
  ./src/js/front/modules/lightbox.js 2.94 KiB [built] [code generated]
  ./src/js/front/modules/parallax.js 3.25 KiB [built] [code generated]
  ./src/js/front/modules/socialShare.js 379 bytes [built] [code generated]
  ./src/js/front/modules/utilities.js 5.43 KiB [built] [code generated]
./node_modules/objectFitPolyfill/dist/objectFitPolyfill.min.js 2.89 KiB [built] [code generated]
webpack 5.1.0 compiled successfully in 235 ms

[webpack-cli] watching files for updates...

Compilation  starting…


Compilation  finished

assets by status 57.3 KiB [cached] 1 asset
cached modules 44.8 KiB [cached] 16 modules
runtime modules 997 bytes 4 modules
./src/js/front/front.js 888 bytes [built] [code generated]
webpack 5.1.0 compiled successfully in 40 ms

[webpack-cli] watching files for updates...

So it notices the change and prints "Compilation starting…" "Compilation finished", but if I look in the "dist" folder, the file has not been updated.

If I switch to:

"webpack": "^4.0.0",
"webpack-cli": "^3.0.0",

then the watch option works, but I can't get tree-shaking to work.

Update:

I've narrowed it down a bit. It's not --watch that's causing the problem. If I try to update any file, it only works if the file is not already in the "dist" folder. So either I need to clear out the "dist" folder everytime a file is built, or I need to figure out why existing files are not getting updated.

Answer 1

Turns out it had nothing to do with the --watch flag. It was my output.

Old (Wrong)

output: {
  filename: '[name].min.js?ver=[contenthash:8]',
  path: path.resolve(__dirname, 'dist')
}

New (Correct)

output: {
  filename: '[name].[contenthash].min.js',
  path: path.resolve(__dirname, 'dist')
}

Not sure how I had the old output functioning at all.