Does webpack bundle equal peer dependencies multiple times?

Question

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

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 create a second project that uses webpack and react and all the other good stuff and I would use my own npm package like so:

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 it bundles the application bundle ReactDom twice or once? And of the answer is twice, is there any chance to get my project to bundle ReactDom only once?

Answer 1

Assuming you're using a relatively recent version (webpack 2 or later) of webpack, it seems it will automatically detect and remove the duplicate (i.e. bundle it only once), and for older versions it can be done manually with --optimize-dedupe or new webpack.optimize.DedupePlugin().

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

Webpack creating duplicate entries for dependencies

Also, it appears Zillow has created a tool to detect duplicate dependencies with different versions, which can sometimes be optimized to use the same version, that tool is here: https://github.com/zillow/webpack-stats-duplicates

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