Webpack 5 DependOn работает только тогда, когда запись зависит только от одной зависимости

Question

Чтобы дать вам некоторый контекст, я работаю над основным приложением.NET, и в один из cshtml я вставляю мини-приложение для реагирования, подобное этому:

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

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

Он работал хорошо, но когда я компилировал с помощью webpack, пакет для семинаров был слишком большим (800 КБ), и я получал предупреждение. Пакет для семинаров включал некоторые зависимости, такие как 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:

<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',
        },
      },
    },
  },
};

Согласно документам :

Кончик

В webpack версии <4 было принято добавлять поставщиков в качестве отдельной точки входа для компиляции в виде отдельного файла (в сочетании с CommonsChunkPlugin).

В webpack 4 это не приветствуется. Вместо этого опция optimisation.splitChunks заботится о разделении модулей поставщиков и приложений и создании отдельного файла. Не создавайте записи для поставщиков или другого материала, который не является отправной точкой выполнения.