How to recompile webpack after changing files?

Question

I'm using webpack with two entry points:

entry: {
  js: './assets/index.js',
  css: './assets/sass/all.scss'
},

I want to configure it so when I change a js or scss file it automatically run webpack again.

---

I tried to use webpack-dev-server with the command:

webpack-dev-server --hot

It looks like it is building again, it outputs the message

webpack: bundle is now VALID.

However if I try to refresh the browser I can't see my changes. (Cache disabled on dev tools and Ctrl+F5 pressed). Restarting node also doesn't work, it is as if it had build somewhere else and not on the configured output file:

output: {
  path: path.join(__dirname, '/public'),
  filename: 'bundle.js'

},

Answer 1

If you want webpack to watch for changes simply use the watch flag:

webpack --watch 

With this option webpack will watch for changes and re-compile.

Answer 2

webpack normally rebuild automatically. In my case it was working fine but suddenly it stopped and the solution was to increase the value into file /proc/sys/fs/inotify/max_user_watches according to the documentation: https://webpack.js.org/configuration/watch/#not-enough-watchers

run the following command:

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

Answer 3

I'm not a webpack expert but what I found is that webpack-dev-server doesn't write to disk. It serves the result from memory through the Express instance it uses to serve the files.

You can test this by changing the path to localhost:8080/webpack-dev-server/bundle.js in your html file and if you run webpack-dev server the changes should show up.

The proper way to handle it is to update your webpack.config.js with a publicPath property:

output: {
    path: path.join(__dirname, '/public'),
    filename: 'bundle.js',
    publicPath: "/public/"
}

In this case the script tag should refer to src="public/bundle.js".

More info