Watch files

Option: watchFiles

Type:

type WatchFiles = {
  paths?: Array<string>;
  includes?: Array<RegExp>;
  excludes?: Array<RegExp>;
};

Default:

watchFiles: {
  paths: ['./src'],
  includes: [/\.(html|ejs|eta)$/],
  excludes: [
    /[\\/](node_modules|dist|test)$/, // ignore standard project dirs
    /[\\/]\..+$/, // ignore hidden dirs and files, e.g.: .git, .idea, .gitignore, etc.
    /package(?:-lock)*\.json$/, // ignore npm files
    /webpack\.(.+)\.js$/, // ignore Webpack config files
    /\.(je?pg|png|ico|webp|svg|woff2?|ttf|otf|eot)$/, // exclude binary assets
  ],
}

The watchFiles option allow specify additional files (besides the default ones) to rebuild when they change during development (with webpack --serv or webpack --watch).

Allows to configure paths and files to watch file changes for rebuild in watch or serv mode.

info
To watch changes with a live reload in the browser, you must additionally configure the watchFiles in devServer, see setup live reload.

Properties

paths - A list of relative or absolute paths to directories where should be watched includes.
The watching path for each template defined in the entry will be autodetect as the first level subdirectory of the template relative to the project's root path. E.g., the template ./src/views/index.html has the watching path of ./src.
includes - Watch the files specified in paths, except excludes, that match the regular expressions. Defaults, are watched only files that match the test plugin option.
excludes - Exclude the specified paths or files, that match the regular expressions.

This options does not override the default values, but extends them.

Example

All source files are in the ./src directory, while some partials included in a template are in ./vendor/ directory, then add it to the paths.

If you want watch changes in some special files used in your template that are only loaded through the template engine, add them to the includes property.

const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');

module.exports = {
  plugins: [
    new HtmlBundlerPlugin({
      entry: {
        index: 'src/views/index.html',
      },
      watchFiles: [
        paths: ['vendor'],
        includes: [
          /data\/.+\.(js|json)$/, // watch all JSON or JS files in the `vendor/data/` directory
          /docs\/.+\.md$/, // watch all MD files in the `vendor/docs/` directory
        ],
      ],
    }),
  ],
};

In this example:
When any .json or .js file in vendor/data/ or any .md file in vendor/docs/ changes, the plugin triggers a rebuild and updates the output.

To exclude watching of files defined in paths and includes, you can use the excludes option. This option has the priority over paths and includes.

info
To display all watched files, enable the verbose option.

Properties​

Properties