Three production bundles (main, polyfills and 1)

[devcube]

Hi,

When executing "npm run build:prod" the webpack.prod.config.js file is used. Within that file we have two entry points given:

  entry: {
    'polyfills':'./src/polyfills.ts',
    'main':'./src/main.ts' // our angular app
  },

The output has three bundles: main.js, polyfills.js and 1.js.
When looking more closely the 1.js contains the about.async.ts file - why is that separated into its own bundle and why is it called "1"?
When trying to separate it into a named bundle, like this:

  entry: {
    'polyfills':'./src/polyfills.ts',
    'main':'./src/main.ts', // our angular app
    'asyncs':'./src/app/about/about.async.ts' // our about file
  },

Then I get an error that about.async.ts is already referenced from app.ts (which is referenced from main.ts). Resources that are included in one entry point cannot be specified as separate entry points. I understand this error but I do not understand why it is not bundled with main.ts in the first case?

I assume that it is because the about.async.ts file is loaded asynchronously which is great! Is this built-in black magic in webpack? When .async is in the file name, it is loaded async and these bundles will be called 1.js, 2.js, 3.js and so forth?

To confuse things even more, I don't really understand how commonchunksplugin is configured in this project. What is the purpose of this plugin?

    new CommonsChunkPlugin({
      name: 'polyfills',
      filename: 'polyfills.[chunkhash].bundle.js',
      chunks: Infinity
    }),

Can someone please shed some light on this?
Thanks!

[devcube]

I've also noticed that the @RouteConfig in app.ts uses a loader for the async about component which is required(). I assume that this is the reason that it is separated into its own webpack bundle. But I still would like some more information about how this all fits together.

[devcube]

Ok, more updates. This is handled by the es6-promise-loader from ours truly gdi2290: https://github.com/gdi2290/es6-promise-loader

It's handled by this loader in the webpack production config:

      {
        test: /\.async\.ts$/,
        loaders: ['es6-promise-loader', 'ts-loader'],
        exclude: [/\.(spec|e2e)\.ts$/]
      }

I'm still not sure why this bundles into "1.js" but I haven't examined the code closely yet either.