Webpack watch() with multiple entry points - emitting bundles for non-changed files?

Question

In my webpack.config.js I have 3 separate entry points, one for the JS bundle, one for the main SCSS bundle, and one for a separate SCSS bundle that has no relationship with the main SCSS bundle.

When I use the webpack.watch() API, for some reason editing, say, the JS source files, causes not only the JS bundle to be recompiled, but also the 2 SCSS bundles.
Why is this, and how can I stop this behaviour and ensure that only the entry point that is edited is recompiled?

The reason this is an issue is I'm using browsersync, and for CSS bundle recompiles I'm just injecting the CSS instead of reloading, but on HTML/JS edits its reloading. However if I edit the SCSS and it also recompiles the JS/HTML browsersync triggers a reload instead of a CSS inject.

Answer 1

In that case you need a file that let webpack detect how many changes have be done on each different entry point.

For that, you can use the manifest file provided by commonsChunkPlugin:

For example, if you have the following entry points:

entry: {    app: 'main.js', // main entry point    vendor: ['jquery', 'react'] //Third libraries } 

You can use the plugin CommonsChunkPlugin:

new wepack.optimize.CommonsChunkPlugin({   name: ['vendor', 'manifest'] }) 

This configuration generates a manifest file as another output. In that case, if you make a change in your 'app' entry point, webpack are only going to recompile the main.js output bundle (according the 'filename' format in the 'output' configuration) because the vendor bundle is already the same.

You can try that with your specific entry points.