Webpack + react：多个包，相同的依赖项？答案

【问题标题】：Webpack + react: multiple bundles, same dependencies?Webpack + react：多个包，相同的依赖项？
【发布时间】：2017-04-13 13:17:27
【问题描述】：

我使用 Laravel Mix 和 webpack 来编译和组合 JSX 资产。我有一个包含所有依赖项（例如 React、ReactDOM 等）的文件以及应该在所有页面上加载的脚本组件（global.js）。然后我为特定页面使用更小的脚本组件（specific.js）。

典型的 HTML 文档如下所示：

<html>
  <body>
    <div id="render-here"></div>
    <script src="/js/global.js"></script>
    <script src="/js/specific.js"></script>
  </body>
</html>

我的混合配置文件如下所示：

mix.react([
    'resources/assets/js/search/index.jsx'
], 'public/js/global.js');

// Note: specific isn't actually called "specific", but rather named after its function
// like profile.js for editing user profiles.
mix.react([
    'resources/assets/js/specific/index.jsx'
], 'public/js/specific.js');

这不是最优的，因为 specific.js 包含与 global.js 相同的依赖项。如何防止特定组件（specific.js）包含所有已由 global.js 加载的相同依赖项？还是我走错了路？

【问题讨论】：

标签： javascript reactjs webpack react-jsx laravel-mix

【解决方案1】：

我用mix.extract解决了这个问题：

mix.extract([
    'react', 'react-dom',
    'react-redux', 'redux',
    'axios',
    'classnames'
]);

mix.react([
    'resources/assets/js/search/index.jsx'
], 'public/js/global.js');

mix.js([
    'resources/assets/js/specific/index.jsx'
], 'public/js/specific.js');

它使用上述供应商脚本呈现两个额外的脚本：manifest.js 和 vendor.js。您将这些脚本置于其他脚本之上：

<script type="text/javascript" src="/js/manifest.js"></script>
<script type="text/javascript" src="/js/vendor.js"></script>
<script type="text/javascript" src="/js/global.js" async></script>

更多信息在这里： https://laravel.com/docs/5.4/mix

【讨论】：