{"id":20030,"library":"filewatcher-webpack-plugin","title":"FileWatcher Webpack Plugin","description":"Webpack plugin that watches files and folders outside webpack's default watch scope using glob patterns. Version 1.2.0. It relies on chokidar for file system monitoring and triggers webpack recompilation when glob-matched files change. Unlike similar plugins (e.g., file-watcher-webpack-plugin, webpack-watch-files-plugin), this one supports recursive directory watching, custom event handlers via chokidar's API, and granular ignore patterns. The package is ESM-only. Note: The plugin's constructor expects an object with a 'watchFileRegex' property (string or array of strings). Common issues include incorrect require style (CJS vs ESM) and misconfiguring the watch path glob (must be relative to the project root).","status":"active","version":"1.2.0","language":"javascript","source_language":"en","source_url":"https://github.com/sap9433/filewatcher-webpack-plugin","tags":["javascript","webpack","webpack file watch","chokidar webpack"],"install":[{"cmd":"npm install filewatcher-webpack-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add filewatcher-webpack-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add filewatcher-webpack-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Provides the compiler hooks (e.g., 'watchRun') that the plugin uses to attach the watcher.","package":"webpack","optional":false},{"reason":"Used to monitor file system changes; all of the plugin's underlying file-watching functionality depends on chokidar.","package":"chokidar","optional":false}],"imports":[{"note":"Since v1.0.0, the package is ESM-only. CommonJS require() will fail.","wrong":"const FileWatcherPlugin = require('filewatcher-webpack-plugin')","symbol":"default","correct":"import FileWatcherPlugin from 'filewatcher-webpack-plugin'"},{"note":"The package exports a default export, not a named one. Named import will be undefined.","wrong":"import FileWatcherPlugin from 'filewatcher-webpack-plugin'","symbol":"FileWatcherPlugin (if named)","correct":"import { FileWatcherPlugin } from 'filewatcher-webpack-plugin'"},{"note":"TypeScript definitions are included since v1.1.0. The options type is exported for convenience.","wrong":"","symbol":"type imports","correct":"import type { FileWatcherPluginOptions } from 'filewatcher-webpack-plugin'"}],"quickstart":{"code":"// webpack.config.js\nimport FileWatcherPlugin from 'filewatcher-webpack-plugin';\n\nexport default {\n  // ... other config\n  plugins: [\n    new FileWatcherPlugin({\n      watchFileRegex: ['./src/scripts/**/*.js', './src/styles/**/*.css'],\n      // Optional chokidar options:\n      ignored: /node_modules/,\n      ignoreInitial: true\n    })\n  ]\n};","lang":"typescript","description":"Configures the plugin in a webpack config file, watching JS and CSS files outside webpack's default watch scope."},"warnings":[{"fix":"Change require() to import statements (ESM) or use a dynamic import wrapper.","message":"The package switched from CJS to ESM in v1.0.0, breaking all require() calls.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Use a string glob pattern like './dir/**/*.js' — not a RegExp literal.","message":"Constructor argument 'watchFileRegex' is required but its name is misleading (it accepts strings/arrays, not RegExp objects).","severity":"deprecated","affected_versions":"all"},{"fix":"Add `ignored: /node_modules/` to the constructor options.","message":"The plugin does not automatically ignore node_modules; you must set 'ignored' option explicitly to avoid performance issues.","severity":"gotcha","affected_versions":"all"},{"fix":"Use absolute paths or paths relative to process.cwd().","message":"Relative paths in 'watchFileRegex' are resolved from the project root (current working directory), not from the webpack config location.","severity":"gotcha","affected_versions":"all"},{"fix":"Update to v1.2.0+ which explicitly supports webpack 5.","message":"As of webpack 5, the 'watchRun' hook signature changed, and some older versions of this plugin may not be compatible.","severity":"deprecated","affected_versions":">=1.0.0 <1.2.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Switch to import statement: `import FileWatcherPlugin from 'filewatcher-webpack-plugin'`","cause":"Using CommonJS require() on an ESM-only package.","error":"Error: Cannot find module 'filewatcher-webpack-plugin'"},{"fix":"Use `new FileWatcherPlugin(...)` after default import, not `new (await import(...)).FileWatcherPlugin(...)`.","cause":"Importing the default export incorrectly (e.g., destructuring it).","error":"TypeError: Class constructor FileWatcherPlugin cannot be invoked without 'new'"},{"fix":"Use glob patterns (e.g., './**/*.js') not RegExp (e.g., /\\.js$/).","cause":"Passing a RegExp object instead of a glob string.","error":"The 'watchFileRegex' option must be a string or an array of strings."},{"fix":"Verify absolute/relative path and ensure 'ignored' does not cover the target files.","cause":"The watched path is incorrect or ignored by 'ignored' option.","error":"No changes detected after file save"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}