how does import statement handled by webpack while bundling react application?

Question

my question is little subjective.

so the scenario is like- I have n numbers of react components. Each components have its respective css file. There are few common css files which are inside assets/css/ files. I am simply importing common css file to my react component css file if needed.

for Example:- There is a assets/css/color.css file which is common and used by few of components. I am importing assets/css/color.css to those css files which needs it. This way I am importing assets/css/color.css many times to different css files.

My question is- When webpack starts bundling the code how does it handle multiple import of same css file? Does importing same css files at many places leads to redundancy in bundle file?

Answer 1

The answer given by How does webpack handle multiple files importing the same module React imply that webpack will only bundle each library only once.

That's true for JS modules. Each module is embeded only once and webpack reuse the instance where appropriate.

However if you include another file inside that file, then it's up to how the css webpack module manage it.

For raw CSS, I think the file will get included only once as all is managed directly by webpack.

However if you use the sass loader and import some other sass file from your first sass file like that:

1.js File -> includes a.sass file -> @import another.sass file 2.js File -> includes b.sass file -> @import another.sass file

Then if another.sass file generate some classes definition, you'll see that these classes appear multiple times in the output. This is because webpack doesn't know about the duplication because it's handled at the sass loader level.