If you reading this post, I assume that you are enough awareness of webpack, so I shall be directly diving into the code part of it.
Assume that there are few
less file that you need to bundle along with webpack's output but those are not
imported in any of your source/target files, below is simple trick in webpack config to bundle such files:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
entry attribute in
webpack config bascialy handles,
stringis passed it's resolved to a module which is loaded upon startup.
arrayis passed all modules are loaded upon startup and the last one is exported.
objectis passed multiple entry bundles are created. The key is the chunk name. The value can be a string or an array.
The above snippet has the following depencies:
/public/styles/external/*.less has those files that are not required in any of
src files but needs to bundled, the trick bascially is to create
js file for each those
less files and then extract them to their respective
css files to
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
This might be very rare scenario or a workaround for some server side rendering stuff, none the less, it's not all that hacky and looks neat?