Extra Watch Webpack Plugin

1.0.3 verified Sat Apr 25 auth: no javascript

A webpack plugin that adds extra files or directories to webpack's watch system, triggering rebuilds when those files change. Version 1.0.3 is the latest stable release, with minimal updates since 1.0.0. Compatible with webpack versions 1 through 4, it supports glob patterns for files and explicit directory paths. Unlike built-in webpack watch options that only track dependencies, this plugin allows any arbitrary file or folder to trigger a rebuild, ideal for configuration files, generated assets, or non-imported resources.

Common errors

error Module not found: Error: Can't resolve 'extra-watch-webpack-plugin' ↓

cause Package not installed or missing from node_modules.

fix

Run 'npm install extra-watch-webpack-plugin --save-dev'

error TypeError: ExtraWatchWebpackPlugin is not a constructor ↓

cause Incorrect import; using destructured require or default import in CommonJS without .default.

fix

Use 'const ExtraWatchWebpackPlugin = require('extra-watch-webpack-plugin');'

error ValidationError: Invalid configuration object. extra-watch-webpack-plugin has been initialized using a configuration object that does not match the API schema. ↓

cause Passing unsupported options or invalid option types (e.g., non-array for files).

fix

Check options: files (array of strings/globs) and dirs (array of path strings).

Warnings

gotcha The plugin does not support webpack 5 and may cause compatibility issues. ↓

fix Switch to webpack's built-in watchOptions.ignored or use another plugin like webpack-watch-files-plugin that supports webpack 5.

breaking In version 1.0.0, the `files` option changed from a single string to also accept arrays. Using a plain string may still work, but the option is documented as array. ↓

fix Update config to use array syntax: files: ['path/to/file']

deprecated The plugin is no longer actively maintained; last release was 1.0.3 in 2019. ↓

fix Consider alternatives like @dolby/extra-watch-webpack-plugin or webpack's native watchOptions.

gotcha The plugin does not automatically create directories; they must exist at startup. ↓

fix Ensure all directories passed to `dirs` option exist before starting webpack.

gotcha Glob patterns in `files` may not match hidden files (dotfiles) depending on the glob implementation. ↓

fix Use explicit paths for hidden files or adjust glob pattern (e.g., '**/.*') and verify with a test.

Install

npm install extra-watch-webpack-plugin

yarn add extra-watch-webpack-plugin

pnpm add extra-watch-webpack-plugin

Imports

ExtraWatchWebpackPlugin
wrong
```
const ExtraWatchWebpackPlugin = require('extra-watch-webpack-plugin').default;
```
correct
```
import ExtraWatchWebpackPlugin from 'extra-watch-webpack-plugin';
```
Package uses default export; CommonJS require() should use require('...').default or use the default import syntax.

ExtraWatchWebpackPlugin

wrong

const { ExtraWatchWebpackPlugin } = require('extra-watch-webpack-plugin');

correct

const ExtraWatchWebpackPlugin = require('extra-watch-webpack-plugin');

In CommonJS, the entire module exports the plugin constructor; destructuring is incorrect.

ExtraWatchWebpackPlugin
```
import type ExtraWatchWebpackPlugin from 'extra-watch-webpack-plugin';
```
TypeScript users may need to import the type for the constructor, but the plugin does not ship types. Use @types/extra-watch-webpack-plugin if available, or declare the module.

Quickstart

Example webpack configuration using ExtraWatchWebpackPlugin to watch additional files and directories beyond the dependency graph.

// webpack.config.js
import ExtraWatchWebpackPlugin from 'extra-watch-webpack-plugin';

export default {
  entry: './src/index.js',
  output: { filename: 'bundle.js', path: '/dist' },
  watch: true,
  plugins: [
    new ExtraWatchWebpackPlugin({
      files: [ 'path/to/config.json', 'src/**/*.json' ],
      dirs: [ 'path/to/extra-directory' ],
    }),
  ],
};