How does webpack handle multiple files importing the same module React

Question

I have a React app which has many components importing the same modules. Does webpack import each module once for each file requesting it, resulting in duplicate code(in thi

Answer 1

No, webpack (similar to browserify and other module bundlers) will only bundle it once.

Every react component will get its own scope, and when it requires/imports another module, webpack will check if the required file was already included or not in the bundle.

So no, it will not result in duplicate code. However if you import some external packaged libraries, you may have some duplicate code. In that case, you can use Webpack's Deduplication plugin to find these files and deduplicate them. More info here for that: https://github.com/webpack/docs/wiki/optimization#deduplication