Webpack 5 DependOn 仅在条目仅依赖于一个依赖项时才有效

Question

为了给你一些背景信息，我正在开发一个 .NET 核心应用程序，并且在其中一个 cshtml 中我正在注入一个这样的反应迷你应用程序：

<div id="workshop" data-id=@Model></div>

<script src="~/bundles/js/workshop-bundle.js"></script>

它运行良好，但是当我使用 webpack 编译时，workshop 包太大（800kb）并且我收到了警告。 Workshop-bundle 包含一些依赖项，例如 axios、highcharts-react-official 和 highcharts/highmaps。所以我尝试拆分捆绑包。

在 webpack.config.js 上，我尝试在其中一个条目中使用 DependOn。在这种情况下，workshop依赖axios、highcharts-react-official和highcharts/highmaps，所以基于webpack doc我尝试了这个：

webpack.config.js

entry: {
    workshop: {
      import: "./wwwroot/component/WorkshopApp.tsx",
      dependOn: ["axios", "highmaps", "highchartreact"],
    },
    highchartreact: "highcharts-react-official",
    highmaps: "highcharts/highmaps",
    axios: "axios",
  },

.cshtml：

<div id="workshop" data-id=@Model></div>
<script src="~/bundles/js/axios-bundle.js"></script>
<script src="~/bundles/js/highchartreact-bundle.js"></script>
<script src="~/bundles/js/highmaps-bundle.js"></script>
<script src="~/bundles/js/workshop-bundle.js"></script>

它生成了 4 个捆绑包，但应用程序没有显示，我没有收到任何错误。

但是，如果我将依赖项放在一个条目中，效果会很好：

webpack.config.js

entry: {
    workshop: {
      import: "./wwwroot/component/WorkshopApp.tsx",
      dependOn: ["workshopVendor"],
    },
    workshopVendor: [
      "axios",
      "highcharts-react-official",
      "highcharts/highmaps",
    ],
  },

.cshtml：

<div id="workshop" data-id=@Model></div>
<script src="~/bundles/js/workshopVendor-bundle.js"></script>
<script src="~/bundles/js/workshop-bundle.js"></script>

这不是一个解决方案，因为我希望将依赖项放在单独的包中，知道吗？ 提前致谢！

Answer 1

不再建议将供应商捆绑包定义为单独的入口点。我认为您遇到了一些依赖关系图错误。 Webpack 应该能够使用 optimization.splitChunks 自动修复这个问题。像这样的东西应该可以工作：

module.exports = {
  //...
  optimization: {
    splitChunks: {
      cacheGroups: {
        axios: {
          test: /[\\/]node_modules[\\/]axios[\\/]/,
          name: 'axios',
          chunks: 'all',
        },
       'highcharts-react-official': {
          test: /[\\/]node_modules[\\/]highcharts-react-official[\\/]/,
          name: 'highcharts-react-official',
          chunks: 'all',
        },
       'highcharts/highmaps': {
          test: /[\\/]node_modules[\\/]highcharts[\\/]highmaps[\\/]/,
          name: 'highcharts/highmaps',
          chunks: 'all',
        },
      },
    },
  },
};

Per the docs:

提示

在 webpack 版本

这在 webpack 4 中是不鼓励的。相反， optimization.splitChunks 选项负责分离供应商和 应用程序模块并创建一个单独的文件。不要为 供应商或其他不是执行起点的东西。