Webpack Plugin Creation Watch Folder

Question

I created a webpack plugin and would like it to be able to trigger a re-compile to my dist folder on changes in a folder, but I'm having trouble finding information on how to do it.

I know it's possible because CopyWebpackPlugin triggers a re-compile when any files change in the from: directory.

In a created plugin, how can I watch a folder for changes that will trigger webpack to recompile to the dist folder?

if the folder is part of the dependency tree, it will already retrigger compilation. — PlayMa256, Jun 11 '18 at 14:13
it's outside of the dependency tree. i.e. there is no reference to it in the javascript injection point, not dissimilar to how copywebpackplugin can copy files external to the dependency tree from, say, a static folder to a dist folder — David Torrey, Jun 11 '18 at 14:21

score 1 · Answer 1 · answered Jun 11 '18 at 14:48

It looks like the trick is to use

compiler.plugin("watch-run", (compilation,callback) => {
}

and I used the npm package "watch" to create an event listener for changes in certain directories:

watch.watchTree(rootPath, function(f,curr,prev){
   ...
   callback();
});

This will trigger code inside the watchtree callback function based on events for files that are under the root path that you can check for.

Webpack Plugin Creation Watch Folder

1 Answers1