Webpack-dev-server: Watch files not required with webpack

Created on 28 Jun 2014 · 13Comments · Source: webpack/webpack-dev-server

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!

Source

gunta

👍6

Most helpful comment

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

sokra on 28 Jun 2014

👍5

All 13 comments

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

sokra on 28 Jun 2014

👍5

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.

kurtharriger on 1 Sep 2014

👍3

+1 for this feature

architectcodes on 13 Mar 2015

Is this possible or not?

Ciantic on 28 Mar 2015

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.