小编Gon*_*ado的帖子

为了给您一些背景信息，我正在开发一个 .NET 核心应用程序，并在其中一个 cshtml 中注入一个反应迷你应用程序，如下所示：

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

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

它运行良好，但当我使用 webpack 编译时，workshop 包太大（800kb），我收到了警告。研讨会包包含一些依赖项，例如 axios、highcharts-react-official 和 highcharts/highmaps。所以我尝试将这些包分开。

在 webpack.config.js 上，我尝试在其中一个条目中使用 DependOn 。在这种情况下，研讨会依赖于 axios、highcharts-react-official 和 highcharts/highmaps，因此根据 webpack 文档，我尝试了以下操作：

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： …