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.
Scenario:
Assume that there are few less
file that you need to bundle along with webpack's output but those are not required
or 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 |
|
The entry
attribute in webpack
config bascialy handles, string
, array
and object
:
If a
string
is passed it's resolved to a module which is loaded upon startup.If an
array
is passed all modules are loaded upon startup and the last one is exported.If an
object
is 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 ./build/css/
path.
Sample output:
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?