CODEWITHSUNDEEP
node.jsangularjswebpackangular-ui-routeroclazyload
WebMatrix
WebMatrix

Reputation: 1601

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

I am new to Webpack. I understand basic concepts of bundeling, code-splitting and chunks, etc. Now I am trying to sprinkle "Webpack magic" into a legacy angularjs app that uses ui-router. So I downloaded the following sample app from ui-router team: https://github.com/ui-router/sample-app-angularjs

In the index.html file I see 2 js files references:

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

And In the webpack.config.js:

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

...

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

In the entrypoint bootstrap.js there're the following imports:

// 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";

So, all the vendor imports happen in ngmodule.js, but bootstrap.js doesn't import it. And as far I can see it's not referenced in any other modules. Now README does mention something about "oclazyload"

ocLazyLoad is used to lazy load the angular module

But it's not clear how it happens or where it's configured. So my questions:

  1. How does ngmodule.js gets bundled into the vendors.js
  2. How does Webpack know that it needs to go into vendor chunk?

Upvotes: 0

Views: 815

Answers (1)

Petr Averyanov
Petr Averyanov

Reputation: 9476

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

Well it is directly imported in index.html) Beside this bootstrap.js imports ga.js, ga.js imports ngmodule.js

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

vendors.js is generated with default optimization.splitChunks (https://webpack.js.org/plugins/split-chunks-plugin/)

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

so ngmodule.js wont go into vendor itself, but imports from node_modules will.

Upvotes: 1

Related Questions