15

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

webpack.WatchIgnorePlugin

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/

watchOptions.ignored

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/

oBusk
  • 852
  • 2
  • 10
  • 21

1 Answers1

4

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.

Codekie
  • 7,574
  • 3
  • 18
  • 26