{"id":20855,"library":"webpack-watch-files-plugin","title":"Webpack Watch Files Plugin","description":"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.","status":"active","version":"1.2.1","language":"javascript","source_language":"en","source_url":"https://github.com/Fridus/webpack-watch-files-plugin","tags":["javascript"],"install":[{"cmd":"npm install webpack-watch-files-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add webpack-watch-files-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add webpack-watch-files-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; required to use as a webpack plugin","package":"webpack","optional":false}],"imports":[{"note":"ESM default import is the only correct pattern. CommonJS require must use .default.","wrong":"const WatchExternalFilesPlugin = require('webpack-watch-files-plugin').default","symbol":"default","correct":"import WatchExternalFilesPlugin from 'webpack-watch-files-plugin'"},{"note":"CJS returns the plugin constructor directly; named destructuring fails.","wrong":"const { WatchExternalFilesPlugin } = require('webpack-watch-files-plugin')","symbol":"WatchExternalFilesPlugin","correct":"const WatchExternalFilesPlugin = require('webpack-watch-files-plugin')"},{"note":"Only default export exists; named export is not available.","wrong":"import { WatchExternalFilesPlugin } from 'webpack-watch-files-plugin'","symbol":"WatchExternalFilesPlugin","correct":"import WatchExternalFilesPlugin from 'webpack-watch-files-plugin'"}],"quickstart":{"code":"import WatchExternalFilesPlugin from 'webpack-watch-files-plugin';\n\nexport default {\n  // ... other webpack config\n  plugins: [\n    new WatchExternalFilesPlugin({\n      files: [\n        './src/styles/**/*.css',\n        './src/templates/**/*.html'\n      ],\n      verbose: true\n    })\n  ]\n};","lang":"javascript","description":"Shows how to import and configure the plugin to watch CSS and HTML files outside the compilation."},"warnings":[{"fix":"Use the same pattern format as webpack's resolve.alias or CopyWebpackPlugin. For negation, add '!./src/*.test.js' alongside './src/**/*.js'.","message":"Patterns use webpack's enhanced-resolve glob syntax, not standard node-glob. Negation patterns must be in the same array after the initial pattern.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use webpack's built-in watch or other HMR-compatible solutions if you need partial updates.","message":"Does not work with HMR (Hot Module Replacement). Only triggers full rebuilds and live-reload.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Enable verbose: true to see which files are being watched.","message":"If 'files' array is empty or contains no matching files, the plugin silently does nothing. No warnings are emitted.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use relative paths like './src/**/*.js' not '/absolute/path/src/**/*.js'.","message":"Patterns must be relative to the webpack context (usually the project root). Absolute paths may not work correctly.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Use require('webpack-watch-files-plugin').default instead of require('webpack-watch-files-plugin').","cause":"CommonJS import without .default when using ESM-style module.","error":"TypeError: WatchExternalFilesPlugin is not a constructor"},{"fix":"Run npm install --save-dev webpack-watch-files-plugin.","cause":"Package not installed or missing from node_modules.","error":"Module not found: Error: Can't resolve 'webpack-watch-files-plugin'"},{"fix":"Ensure options includes { files: [...], verbose: false }.","cause":"Options object missing required 'files' key or providing a non-array value.","error":"ValidationError: Invalid plugin options"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}