Update only the chunks that have changed with Webpack.watch()?

Question

I have a webpack build that utilizes the watch() method to continuously rebuild my javascript as I work. I also have a watcher that uploads changed JS files to a remote server.

Right now when I change ANY file, it recompiles ALL files. So even if one chunk changed, it will update everything, including my vendor file and other unrelated bundles, chunks, etc.

Is there a way in Webpack to only recompile the files that changed and have dependencies that were changed?

Here's an example of my webpack build code:

var compiler = webpack(require('./webpack.config.js'));
compiler.watch({
    aggregateTimeout: 300, // wait so long for more changes
    poll: true
}, function(err, stats) {
    console.log(stats);
});

Sacramentalism

webpack only updates the output files that had changed chunks. Are you using require.resolve/System.import? If you are, you need chunk-manifest-plugin or inline-manifest-plugin to prevent the chunk hashes from changing the vendor chunk. – Serpens

Answer 1

Yes, you can configure Webpack by using the watchOptions property in your webpack config.

module.exports = {
  watchOptions: {
    ignored: /node_modules/,
    poll: 1000 // second
  }
};

in the top Webpack config only recompile the files that have changed and their dependencies. also, you can set watchOptions.poll to a number or true to enable polling.

Decarburize