Проблемы с закрытием Webpack 4 с общим пакетом - PullRequest
Новая
       10

Проблемы с закрытием Webpack 4 с общим пакетом

0 голосов
/ 10 мая 2018

Я пытаюсь перейти на Webpack 4 из 3 и у меня проблемы с закрытием общего пакета.

Мой веб-пакет настроен на создание файла shared.js с общим кодом от a.js до b.js. В частности, в пакете shared.js есть индексный файл с переменной store. Мы экспортируем только функцию с именем getStore(), которая возвращает store. Этот вызов для getStore происходит в разных местах в наших a.js и b.js файлах.

Список наших скриптов на нашей странице выглядит следующим образом: 

/** some html **/
<script src=""/scripts/shared.js""></script>
<script src=""/scripts/a.js""></script>
<script src=""/scripts/b.js""></script>

В Webpack 3, при вызове кода getStore(), который находится в shared.js (вызов поступает) из a.js в первый раз, он создает экземпляр store, который затем вызывает возврат store из getStore() звонок. При любых последующих вызовах getStore() из a.js он больше не создает экземпляр store, а возвращает те же значения из getStore(). Затем, после завершения a.js и запуска b.js, когда b.js вызывает getStore(), он не создает экземпляр store, а использует тот же экземпляр, который использовал a.js. В этом случае store - это один и тот же экземпляр для всех остальных a.js и b.js.

Однако в Webpack 4 поведение отличается. Когда a.js вызывает код в shared.js, когда код впервые ссылается на getStore(), аналогично предыдущему, он создаст новый экземпляр store, и пока a.js запускается и вызывает getStore(), он возвращает то же самое пример. Однако, когда b.js делает начальную ссылку на код shared.js, он не использует тот же самый экземпляр a.js, который используется, скорее он создает новый экземпляр store и на протяжении всего запуска сценария b.js он ссылается на второй store при вызове getStore(). В этом случае есть два экземпляра store, каждый из которых уникален для a.js и b.js.

Не уверен, что отличает Webpack 4 от этой проблемы. Мы перешли от использования CommonChunksPlugin в Webpack 3 и теперь используем встроенный параметр оптимизации. Ниже показано, как они были настроены.

WEBPACK 3: 

plugins: [..., new webpack.optimize.CommonsChunkPlugin({
    name: 'shared',
    filename: '[name].js',
    minChunks: 2
})]

WEBPACK 4: 

optimization: {
    splitChunks: {
        cacheGroups: {
            shared: {
                name: 'shared',
                chunks: 'initial',
                minChunks: 2
            }
        }
    }
}

Обе конфигурации Webpack выделяют файлы примерно одинакового размера, и при отладке и просмотре стека вызовов поступают вызовы для getStore() из соответствующих файлов a / b.js.

Есть ли объяснение, почему a.js и b.js получают отдельные экземпляры объекта shared.js store в Webpack 4 по сравнению с тем, что получает те же экземпляры, что и в Webpack 3? Когда сценарии зависят друг от друга, как их замыкания / области действия должны обрабатывать общий код?

...