webpack捆绑包是否多次等同于对等依赖项？

Question

假设我创建一个名为use react-web-component和import 的npm包react-dom,如下所示:

import ReactDOM from 'react-dom';

export default {
  create: function (app, tagName, options) {
    // Some code
    ReactDOM.render(app, mountPoint);
  }
};

我会把它发布在npm上react-web-component;

现在我创建了一个使用webpack和react所有其他好东西的第二个项目,我将使用我自己的npm包,如下所示:

的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,当它捆绑应用程序包ReactDom两次或一次？答案是两次,有没有机会让我的项目ReactDom只捆绑一次？

Answer 1

假设您使用的是 webpack 的相对较新版本（webpack 2 或更高版本），它似乎会自动检测并删除重复项（即仅捆绑一次），对于旧版本，可以使用--optimize-dedupe或 手动完成new webpack.optimize.DedupePlugin()。

来源： https: //github.com/webpack/docs/wiki/optimization#deduplication

Webpack 为依赖项创建重复条目

此外，Zillow 似乎还创建了一个工具来检测不同版本的重复依赖项，有时可以对其进行优化以使用相同版本，该工具位于：https://github.com/zillow/webpack-stats-duplicates

来源： https:
//www.zillow.com/engineering/webpack-optimize-dependencies/