Code splitting в Webpack 5?

Question

[toxanski]

Добрый вечер, столкнулся с такой проблемой, что при миграции с 4ого вебпака на 5ый ломается code splitting.
Я не могу понять почему 5ый вебпак делит чанки так, что jquery попадает в каждый чанк, а не в common.js(общий файл для всех страниц).

Это скрипт собранный 4ым вебпаком:


Вот что собрал 5ый вебпак:


Логично было бы поместить jquery в common.js, но webpack 5 так не считает. Вот код билда:


Можно ли исправить это поведение?

Answer 1

[profesor08]

const options = {
    optimization: {
      runtimeChunk: "single",
      splitChunks: {
        cacheGroups: {
          commons: {
            name: "common",
            chunks: "initial",
            minChunks: 2,
            enforce: true,
          },
        },
      },
    },
  };

Comments

[toxanski]

Добавил runtimeChunk: "single", вроде теперь jquery как и было находится в common.js, но теперь пишет, что jquery вовсе не инициализирован при загрузке страницы

[toxanski]

Теперь он вроде как есть в common.js, но не понятно почему undefined

[profesor08]

toxanski, потому что ты используешь его как глобальную переменную, а подключаешь как модуль.

[toxanski]

В модулях у меня стоит:
import $ from 'jquery';
А в документе идёт вызов jQuery.
Я пытался сделать jQuery глобальным, но не выходит(использовал тот же expose-loader, всё равно не работает).
В webpack 4 почему-то работало без танцев с бубном. Как это можно исправить?

[profesor08]

toxanski, подключи отдельным файлом