在这个示例应用程序中，webpack 如何对供应商文件进行代码拆分答案

【问题标题】：How does webpack do code splitting for vendor file in this sample app在这个示例应用程序中，webpack 如何对供应商文件进行代码拆分
【发布时间】：2019-09-11 07:20:46
【问题描述】：

我是 Webpack 的新手。我了解捆绑、代码拆分和块等的基本概念。现在我正在尝试将“Webpack 魔法”撒入使用 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 用于延迟加载 Angular 模块

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

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

【问题讨论】：

标签： node.js angularjs webpack angular-ui-router oclazyload

【解决方案1】：

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

直接在index.html中导入）除了这个bootstrap.js导入ga.js，ga.js导入ngmodule.js

ngmodule.js 是如何捆绑到 vendor.js 中的

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

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

所以 ngmodule.js 不会进入供应商本身，但从 node_modules 导入会。

【讨论】：