browser-sync-webpack-plugin icon indicating copy to clipboard operation
browser-sync-webpack-plugin copied to clipboard

Detect compilation trigger instead of referencing emitted assets when determining whether to inject css or reload

Open farmerau opened this issue 6 years ago • 5 comments

In lib/getCssOnlyEmittedAssetsNames.js, it's apparent that the logic regarding about whether or not to inject CSS is entirely related about the emitted files. This can work in situations where (S)CSS might not be included in JavaScript, or in situations where spritemaps or manifests aren't being generated.

Instead, determining whether or not we should inject CSS could be determined by checking the triggered source files to see if it's an injectable resource. This can be done in the watchRun compiler hook by setting a flag in the plugin to true or false depending on inspection of the keys in compiler.watchFileSystem.(watcher||wfs.watcher).

If there's interest in implementing this, I've written a webpack plugin which manipulates the values inside stats.compilation.assets. I don't think this is the ideal solution, so I haven't published or made it otherwise public in favor of my hope that we might be able to offer the functionality directly in this plugin. I'm happy to submit a pull-request if this is something people would like to see.

Ideally, there'd be an option to specify the source file extensions (probably via Regular Expressions) for testing against the triggering files.

farmerau avatar Jan 25 '19 20:01 farmerau

@farmerau Very good points! If you have the time for sure, do a PR. Thanks for the interest. I haven't had a look at this project in a while and I'm not sure I will have the time as I haven't used it too much.

malinbranduse avatar Jan 25 '19 20:01 malinbranduse

@malinushj curious are you are using Webpack Dev Server in favor of browser sync? Or are there other reasons for you, "haven't used [this plugin] too much."

alexkoepke avatar Jan 25 '19 21:01 alexkoepke

@alexkoepke Pretty much, been working with Vue and thus having HMR is much faster and more convenient/easier to setup.

malinbranduse avatar Jan 25 '19 21:01 malinbranduse

@malinushj PR created.

farmerau avatar Jan 26 '19 19:01 farmerau

guys, i've commented on the PR and gonna duplicate here as well:

if someone could verify that it works on all webpack versions (1-4), i will make some updates and merge the related PR to enable this, then release a new version. otherwise, i would not risk the stability of the package, as this compiler.watchFileSystem.(watcher||wfs.watcher) feels pretty shady.

thank you

Va1 avatar Apr 08 '20 17:04 Va1