Menu
When using webpack with watch, such as when using webpack-dev-server there seem to be (at least) two different ways of excluding files from watching. I can't really find any documentation on the difference between these two configurations and why they are different. Does anyone know why? Is one method preferred? Should I open an issue and/or pull request to improve documentation?
The case I recently ran into where watch was being triggered multiple times on first run was fixed by adding watchIgnorePlugin and not fixed by watchOptions.ignored
Ignore the specified files, i.e. those matching the provided paths or regular expressions, while in watch mode.
new webpack.WatchIgnorePlugin(paths)Options
- paths (array): A list of RegExps or absolute paths to directories or' files that should be ignored.
https://webpack.js.org/plugins/watch-ignore-plugin/
For some systems, watching many file systems can result in a lot of CPU or memory usage. It is possible to exclude a huge folder like
node_modules:ignored: /node_modules/It is also possible to use anymatch patterns:
ignored: "files/**/*.js"
https://webpack.js.org/configuration/watch/
503
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 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.
A set of options used to customize watch mode: Add a delay before rebuilding once the first file changed. This allows webpack to aggregate any other changes made during this time period into one rebuild. Pass a value in milliseconds: For some systems, watching many files can result in a lot of CPU or memory usage.
The watchOptions.ignored -option supports anymatch -patterns, which includes regular expression, glob, string, or function that takes the string as an argument and returns a truthy or falsy value. Note: This module has Bash-parity, please be aware that Windows-style backslashes are not supported as separators.
Ignore the specified files, i.e. those matching the provided paths or regular expressions, while in watch mode. paths (array): A list of RegExps or absolute paths to directories or' files that should be ignored. For some systems, watching many file systems can result in a lot of CPU or memory usage.
There are a variety of reasons why webpack might miss a file change. Verify that webpack is not being notified of changes by running webpack with the --progress flag. If progress shows on save but no files are outputted, it is likely a configuration issue, not a file watching issue. Verify that you have enough available watchers in your system.
The WatchIgnorePlugin-plugin supports a list of RegExps or absolute paths to directories or files that should be ignored.
The watchOptions.ignored-option supports anymatch-patterns, which includes regular expression, glob, string, or function that takes the string as an argument and returns a truthy or falsy value.
If you were working on Windows, this might have been the reason why watchOptions.ignored didn't work for you:
Note: This module has Bash-parity, please be aware that Windows-style backslashes are not supported as separators. See https://github.com/micromatch/micromatch#backslashes for more information.
198
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
