Question

我是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用于延迟加载角度模块

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

ngmodule.js如何捆绑到vendors.js中
Webpack如何知道它需要进入供应商市场？

Answer 1

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导入。

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

1 个答案: