Watch files not required with webpack

[gunta]

Hi! Would it be possible to add to webpack-dev-server and middleware an option to watch also files outside the required ones?
This is needed specially for the HTML files, and maybe some css ones.

Thank you!

[sokra]

This should be possible within a plugin. Something similar to this:

plugins: [
  function(compiler) {
    compiler.plugin("after-compiler", function() {
      this.fileDependencies.push("/path/to/my/file");
      this.contextDependencies.push("/path/to/my/folder");
    }
  }
]

[kurtharriger]

I gave this a try and added this to the top of my gruntfile:

function WatchExternalFilesPlugin() {}
WatchExternalFilesPlugin.prototype.apply = function(compiler) {
  compiler.plugin("after-compile", function(compilation, callback) {
    compilation.fileDependencies.push("./app/worksheet.html");
    callback();
  });
};

When I change worksheet.html I see in the javascript console:

App updated. Recompiling... 
[WDS] App hot update... client?f5c9:52
[HMR] Checking for updates on the server... dev-server.js?05e4:41
GET http://localhost:8991/aa9359377b69ed42a399.hot-update.json 404 (Not Found) bootstrap aa9359377b69ed42a399?000c:23
[HMR] No Update found. 

If I comment out the HotModuleReplacementPlugin it will refresh the page otherwise it does nothing.

[tomek-he-him]

+1 for this feature

[Ciantic]

Is this possible or not?

[jdeal]

Bit of a janky solution, but I used the text-loader module to do something like this. (In my case, CSS generated outside of webpack, but same principal.)

Basically, just npm install text-loader and then make a watch.js entry point (which you'll not actually use). In your watch.js file, add in text files like:

require('text!./app/worksheet.html');

That way, watch.js will get changed any time you change worksheet.html, and your app will get reloaded.

A better variant of this would be to have a "hash-loader" which would just MD5 hash the content and use that instead of the actual content, because in this case you don't actually need the content, just something to notify that there's a change. Should be pretty easy to create such a loader.

[airwin]

+1

[jaredleechn]

👏

[SpaceK33z]

Closing issue because the answer provided is clear; make a loader for this, or use an existing one :).

[ghost]

Did anyone ever come up with a solution for this? It doesn't seem like fileDependencies or contextDependencies exist anywhere.

[dudewad]

@sokra shouldn't this be compiler.plugin('after-compile'...? I can't find any hooks anywhere called after-compiler.

[Fridus]

Hi, try this : https://github.com/Fridus/webpack-watch-files-plugin ;)

[sap9433]

Just wrote a plugin that does exactly the same - solves your problem - https://www.npmjs.com/package/filewatcher-webpack-plugin .

@Fridus looks like this 1 got move power under its sleeve.

[ivanm376]

possible problem for Linux users see https://webpack.js.org/configuration/watch/#not-enough-watchers