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

Question

我是 Webpack 的新手。我了解捆绑、代码拆分和块等基本概念。 现在我正在尝试将"Webpack magic"洒入使用 ui-router 的传统 angularjs 应用程序中。所以我从ui-router团队下载了以下示例应用程序： https://github.com/ui-router/sample-app-angularjs

在索引.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', },
},

在入口点引导程序中.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 不会导入它。据我所知，它没有在任何其他模块中引用。现在自述文件确实提到了一些关于"oclazyload"的事情

ocLazyLoad 用于延迟加载角度模块

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

1. ngmodule.js如何捆绑到供应商中.js
2. Webpack 如何知道它需要进入供应商块？

Answer 1

Webpack 如何知道它需要进入供应商块？

好吧，它直接导入索引.html)除了这个引导之外.js导入 ga.js，ga.js 导入 ngmodule.js

ngmodule.js如何捆绑到供应商中.js

供应商.js 是使用默认优化生成的。splitChunks (https://webpack.js.org/plugins/split-chunks-plugin/)

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

因此.js ngmodule不会进入供应商本身，但从node_modules进口会。