webpack --watch isn't compiling changed files

Question

I tried running webpack --watch and after editing my JS files, it doesn\'t trigger an auto-recompilation.

I\'ve tried reinstalling webpack

Answer 1

I have the same issue. And I notice it's not compiling because my folder contains some character(*). And using the old watcher plugin seems to resolve the issue. Add this line to your webpack config file.

plugins: [
    new webpack.OldWatchingPlugin()
  ]

Answer 2

If this happened suddenly in your project, then this could fix the issue.

Maybe somehow the files which were tracking your project changes which webpack looks for got corrupted. You can create them again just by following simple steps.

1. come out of your project dir. ($: cd ..)
2. move your project to different directory ($: mv {projectName} {newName})
3. go into the new dir ($: cd {newName})
4. start the server and check if it reloads on every file change (it should work in most cases, because now webpack creates new files to watch for changes)
5. come out of the dir ($: cd ..)
6. move it back to its original name ($: mv {newName} {projectNam}) This worked for me............

Answer 3

One issue is that if your path names aren't absolute then things like this will happen. I had accidentally set resolve.root to ./ instead of __dirname and this caused me to waste a lot of time deleting and re-creating files like the guys above me.

Answer 4

Also had this issue inside a VirtualBox (5.2.18) Ubuntu (18.04) VM using Vagrant (2.1.15) with rsync synchronization. Suddenly, first build runs great but Webpack does not take the changes into consideration afterwards, even with fs.inotify.max_user_watches=524288 set. Adding poll: true in Webpack config didn't help either.

Only vagrant-notify-forwarder worked (vagrant-fsnotify didn't, for some reason), but then the rebuild happened too quickly after saving the file on the host and I suppose that rsync didn't have enough time to finish its task (maybe due to the amount of synced directories inside my Vagrantfile?).

Finally I made the watch work again by also increasing the aggregateTimeout in my Webpack config:

module.exports = {
  watch: true,
  watchOptions: {
    aggregateTimeout: 10000
  },
  ...
}

If this solution works for you, try lowering this value again, otherwise you'll have to wait 10 seconds until the build restarts each time you hit save. The default value is 300 ms.

Answer 5

The way I resolved the issue was finding a capitalization error in an import path. Folder on file system had lower case first letter, import path was upper case. Everything compiled fine, so this was just a webpack watch include issue.

Answer 6

Problem was in distiction between .js and .ts files. Why ?

On project build, Visual Studio compiles typescript files into .js and .js.map. This is totally unecessary, because webpack handles typescript files as well (with awesome-typescript-loader). When editing componet .tsx files in Visual Studio Code or With disabled compileOnSave option in tsconfig.json, edited ts file is not recompiled and my webpack was processing unactual .js file.

Solution was to disable compiling typescript files in visual studio on project build. Add

<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>

in PropertyGroup of your .csproj.