Как webpack выполняет разбиение кода для файла вендора в этом примере приложения - PullRequest
0 голосов
/ 22 апреля 2019

Я новичок в Webpack. Я понимаю базовые концепции разбивки, разбиения кода и кусков и т. Д. Теперь я пытаюсь добавить «магию веб-пакетов» в устаревшее приложение angularjs, которое использует ui-router. Поэтому я скачал следующий пример приложения от команды ui-router: https://github.com/ui-router/sample-app-angularjs

В файле index.html я вижу 2 ссылки на js-файлы:

 <script src="_bundles/vendors~sampleapp.js"></script>
   <script src="_bundles/sampleapp.js"></script>

и в webpack.config.js:

 entry: {
     "sampleapp": "./app/bootstrap/bootstrap.js",   }

...

 optimization: {
     splitChunks: { chunks: 'all', },
   },

В точке входа bootstrap.js есть следующие импорты:

// Each module registers it states/services/components, with the `ngmodule`
import "../global/global.module";
import "../main/main.module";
import "../contacts/contacts.module";
import "../mymessages/mymessages.module";
import "../prefs/prefs.module";

Итак, весь импорт поставщиков происходит в ngmodule.js, но bootstrap.js не импортирует его. И насколько я вижу, на него нет ссылок ни в каких других модулях. Теперь README упоминает кое-что о "oclazyload"

ocLazyLoad используется для отложенной загрузки углового модуля

Но не ясно, как это происходит и где это настроено. Итак, мои вопросы:

  1. Как файл ngmodule.js включается в vendors.js
  2. Откуда Webpack знает, что он должен входить в блок вендора?

1 Ответ

1 голос
/ 22 апреля 2019

Откуда Webpack знает, что он должен входить в блок вендора?

Ну, это напрямую импортируется в index.html) Помимо этого bootstrap.js импортирует ga.js, ga.js импортирует ngmodule.js

Как файл ngmodule.js включается в vendors.js

vendors.js создается с оптимизацией по умолчанию.splitChunks (https://webpack.js.org/plugins/split-chunks-plugin/)

...    
    cacheGroups: {
            vendors: {
              test: /[\\/]node_modules[\\/]/,
              priority: -10
    }
...

так что ngmodule.js не войдет в состав самого поставщика, но импорт из node_modules будет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...