I have a decent sized webpack application that's heavily organized into particular segments. Everything works great with both pure javascript and jsx files, as anytime I update anything it incrementally rebuilds the bundle.
I have now added a new folder in the same root as all my others, and created a new javascript file in it. Webpack knows too look for it because it is including the code in the bundle, and anytime it sees that one of the other files is changed it correctly rebuilds all changes, including in my new javascript file.
However, for some reason whenever I save a change to this one javascript file, webpack does not detect that it needs to reload the changes from it. Therefore, if the only changes I make are in this one javascript file a new bundle won't be created and I have to ctrl+c and re-run webpack.
I've tried renaming the folder, renaming the javascript file, and several other steps that did nothing to help the situation.
Can anyone give any insight into what may be going on, or is there any way I can get more information about what webpack is seeing or not seeing?
Using Watch Mode You can instruct webpack to "watch" all files within your dependency graph for changes. If one of these files is updated, the code will be recompiled so you don't have to run the full build manually. Now run npm run watch from the command line and see how webpack compiles your code.
When using watch mode, webpack installs file watchers to all files, which were used in the compilation process. If any change is detected, it'll run the compilation again. When caching is enabled, webpack keeps each module in memory and will reuse it if it isn't changed.
using the old watcher plugin seems to resolve the issue for my needs. Done in my configuration via:
plugins: [
new webpack.OldWatchingPlugin()
],
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With