Webpack 4 - это трогательное дерево, как я могу это предотвратить?

Question

Я пытаюсь получить унаследованное приложение, использующее модальный плагин Jquery, для работы которого требуется JavaScript-код загрузчика для работы в проектах Angular 6 и Webpack 4, использующих пользовательскую конфигурацию Webpack.Все работает, за исключением того, что встряхивание дерева, которое происходит во время связывания, удаляет импорт начальной загрузки, который находится в моем файле vendor.ts, потому что нигде в моем приложении я явно не использую импорт начальной загрузки.

Это приводит к тому, что мои модалы начальной загрузки и раскрывающиеся списки начальной загрузки ломаются.

Примечание: если я добавлю что-то вроде:

import * as bootstrap from "bootstrap";
console.log(bootstrap);

к моему main.ts файл, webpack не удаляет загрузчик и все работает отлично.

Я уже пытался добавить несколько записей в мое свойство package.json sideEffects, которое было предложено в документации , но я думаю, что это свойство используется для маркировки кода, который долженбыть удалено.Есть ли способ пометить импортированные модули как , а не , которые будут удалены из процесса встряхивания дерева?

Я также пробовал использовать ProvidePlugin следующим образом:

new ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    "window.jQuery": "jquery",
    _: "underscore",
    bootstrap: "bootstrap",
    moment: "moment",
    momenttimezone: "moment-timezone",
    // Collapse: "exports-loader?Collapse!bootstrap/js/dist/collapse",
    // Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown",
    Modal: "exports-loader?Modal!bootstrap/js/dist/modal",
})

Спасибоза ваше время.

Answer 1

У меня была та же проблема, и решение было следующее:

вместо использования "import", используйте "require".

Измените это

import * as bootstrap from "bootstrap";

к этому

require("bootstrap");

К сожалению, я так и не понял, как заставить его работать с «импортом».

Answer 2

После более глубокого изучения этой проблемы у меня возникли аналогичные проблемы с другими операциями импорта, основная проблема заключалась в том, что я ссылался на сторонние библиотеки в более чем одном месте.

Другими словами, я импортировал JQuery, загрузчик и другие библиотеки в мой main.ts, мой vendor.ts и в мой ProvidePlugin .После того, как приложение было упаковано, различные ссылки конфликтовали друг с другом, и это вызвало проблемы в моем приложении.

Я начал с очистки всех ссылок и их all в одном месте., ProvidePlugin.Затем я также добавил runtimeChunk в конфигурацию моего веб-пакета.

optimization: {
    runtimeChunk: "single"
}

Это гарантирует, что весь код ссылается на одни и те же библиотеки.Ознакомьтесь с документацией здесь .Я собираюсь оставить ответ как принятый для @hostar, потому что он все же решил мою первоначальную проблему.

Answer 3

Попробуйте webpack.ProvidePlugin в конфигурации вашего веб-пакета:

Автоматически загружайте модули вместо необходимости import или require их везде.

Пример:

// In webpack config
...
plugins: [
  new webpack.ProvidePlugin({
    bootstrap: 'bootstrap'
  })
]
...

Более подробную информацию о «шимминге» можно найти в документации .