Registry / devops / webpack-watch-files-plugin

webpack-watch-files-plugin

library1.2.1jsnpmunverified

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.

devops

npm install webpack-watch-files-plugin

github ↗package ↗

INSTALL

IMPORT

SIG · WEBPACK-WATCH-FILE

webpack-watch-files-plugin

devopsjavascriptv1.2.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

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

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

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

WatchExternalFilesPlugin

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

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

CJS returns the plugin constructor directly; named destructuring fails.

WatchExternalFilesPlugin

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

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

Only default export exists; named export is not available.

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 }) ] };

Debug

Known issues

gotchaPatterns 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'.

affects: >=1.0.0

gotchaDoes 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.

affects: >=1.0.0

gotchaIf '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.

affects: >=1.0.0

gotchaPatterns 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'.

affects: >=1.0.0

Errors

Common errors & fixes

TypeError: WatchExternalFilesPlugin is not a constructor

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

fix

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

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

Package not installed or missing from node_modules.

fix

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

ValidationError: Invalid plugin options

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

fix

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

Upgrade

Version history

1.2.1latest on npm

Audit

Dependencies

webpackrequiredPeer dependency; required to use as a webpack plugin

Agent activity

18 hits · last 30 days

node

Resources

githubhttps://github.com/Fridus/webpack-watch-files-plugin ↗

packagehttps://www.npmjs.com/package/webpack-watch-files-plugin ↗