Does webpack install peer-to-peer equal dependencies multiple times?

Question

Let's say I create an npm package called react-web-component that uses and imports react-dom , for example:

 import ReactDOM from 'react-dom'; export default { create: function (app, tagName, options) { // Some code ReactDOM.render(app, mountPoint); } }; 

I would publish it on npm as react-web-component ;

Now I am creating a second project that uses webpack and react , and all the other good things, and I would use my own npm package, for example:

package.json

 { "devDependencies": { "react-web-component": "^1.0.0", "react": "^15.5.4", "react-dom": "^15.5.4" }, } 

index.js

 import React from 'react'; import ReactDOM from 'react-dom'; import ReactWebComponent from 'react-web-component'; import App from './App'; ReactWebComponent.create(<App />, 'my-react-web-component'); 

Woud webpack , when does it bundle the ReactDom application ReactDom twice or once? And the answer is two times, is there a chance that my project will link ReactDom only once?

Answer 1

Assuming that you are using a relatively recent version of webpack 2 or a later version of a web package, it seems that it will automatically detect and delete the duplicate (that is, bind it only once), and for older versions this can be done manually using --optimize-dedupe or new webpack.optimize.DedupePlugin() .

Sources: https://github.com/webpack/docs/wiki/optimization#deduplication

Webpack creating duplicate dependency entries

Furthermore, it seems that Zillow has created a tool for detecting duplicate dependencies with different versions that can sometimes be optimized to use the same version, this tool is here: https://github.com/zillow/webpack-stats-duplicates

A source:
https://www.zillow.com/engineering/webpack-optimize-dependencies/