Webpack Watch Files Plugin

1.2.1 verified Sat Apr 25 auth: no javascript

Webpack plugin that watches additional files and triggers a rebuild when those files change. Version 1.2.1 is the latest stable release, with no recent updates. It supports webpack 3, 4, and 5. Unlike webpack's built-in watch machinery, this plugin allows watching glob patterns outside the compilation context (e.g., configuration files, data files). It works with live-reload but not HMR. The plugin is simple: accepts an array of file patterns (with negation support) and an optional verbose flag to log matched files. It has no dependencies beyond webpack.

Common errors

error TypeError: WatchExternalFilesPlugin is not a constructor ↓

cause CommonJS import without .default when using ESM-style module.

fix

Use require('webpack-watch-files-plugin').default instead of require('webpack-watch-files-plugin').

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

cause Package not installed or missing from node_modules.

fix

Run npm install --save-dev webpack-watch-files-plugin.

error ValidationError: Invalid plugin options ↓

cause Options object missing required 'files' key or providing a non-array value.

fix

Ensure options includes { files: [...], verbose: false }.

Warnings

gotcha Patterns use webpack's enhanced-resolve glob syntax, not standard node-glob. Negation patterns must be in the same array after the initial pattern. ↓

fix Use the same pattern format as webpack's resolve.alias or CopyWebpackPlugin. For negation, add '!./src/*.test.js' alongside './src/**/*.js'.

gotcha Does not work with HMR (Hot Module Replacement). Only triggers full rebuilds and live-reload. ↓

fix Use webpack's built-in watch or other HMR-compatible solutions if you need partial updates.

gotcha If 'files' array is empty or contains no matching files, the plugin silently does nothing. No warnings are emitted. ↓

fix Enable verbose: true to see which files are being watched.

gotcha Patterns must be relative to the webpack context (usually the project root). Absolute paths may not work correctly. ↓

fix Use relative paths like './src/**/*.js' not '/absolute/path/src/**/*.js'.

Install

npm install webpack-watch-files-plugin

yarn add webpack-watch-files-plugin

pnpm add webpack-watch-files-plugin

Imports

default

wrong

const WatchExternalFilesPlugin = require('webpack-watch-files-plugin').default

correct

import WatchExternalFilesPlugin from 'webpack-watch-files-plugin'

ESM default import is the only correct pattern. CommonJS require must use .default.

WatchExternalFilesPlugin

wrong

const { WatchExternalFilesPlugin } = require('webpack-watch-files-plugin')

correct

const WatchExternalFilesPlugin = require('webpack-watch-files-plugin')

CJS returns the plugin constructor directly; named destructuring fails.

WatchExternalFilesPlugin

wrong

import { WatchExternalFilesPlugin } from 'webpack-watch-files-plugin'

correct

import WatchExternalFilesPlugin from 'webpack-watch-files-plugin'

Only default export exists; named export is not available.

Quickstart

Shows how to import and configure the plugin to watch CSS and HTML files outside the compilation.

import WatchExternalFilesPlugin from 'webpack-watch-files-plugin';

export default {
  // ... other webpack config
  plugins: [
    new WatchExternalFilesPlugin({
      files: [
        './src/styles/**/*.css',
        './src/templates/**/*.html'
      ],
      verbose: true
    })
  ]
};