webpack 如何在此示例应用程序中对供应商文件进行代码拆分

Question

我是 Webpack 的新手。我了解捆绑、代码拆分和块等的基本概念。现在，我正尝试将 "Webpack magic" 散布到使用 ui-router 的遗留 angularjs 应用程序中。所以我从 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 is used to lazy load the angular module

但尚不清楚它是如何发生的或在哪里配置的。所以我的问题：

ngmodule.js 如何捆绑到 vendors.js
Webpack 如何知道它需要进入 vendor 块？

Answer 1

How does Webpack know that it needs to go into vendor chunk?

嗯，直接导入在index.html)旁边这个bootstrap.js导入ga.js，ga.js导入ngmodule.js

How does ngmodule.js gets bundled into the vendors.js

vendors.js 默认生成 optimization.splitChunks (https://webpack.js.org/plugins/split-chunks-plugin/)

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

所以 ngmodule.js 不会进入 vendor 本身，但是从 node_modules 进口会。

webpack 如何在此示例应用程序中对供应商文件进行代码拆分

How does webpack do code splitting for vendor file in this sample app

node.js

angularjs

webpack

angular-ui-router

oclazyload