Handle CommonsChunkPlugin Assets (updated)

[HorizonXP]

Building on @stephen-haddix 's work, I've rebased his branch against master, bringing it up to date. I also updated his test to use the new configuration format, but I did run it using the legacy arguments format, and it worked the same.

The biggest change here is the removal of hard-coded chunk names. From https://webpack.js.org/guides/caching/#deterministic-hashes:

Separate your vendor and application code with CommonsChunkPlugin and create an explicit vendor chunk to prevent it from changing too often. When CommonsChunkPlugin is used, the runtime code is moved to the last common entry.

(Emphasis added)

Knowing this, we can now handle an arbitrary number of chunks, because we know the webpackJsonP function is loaded into the last chunk. Just like in the browser, this last chunk needs to be executed first, so that it can load the necessary chunks and functions for the subsequent chunks to execute properly.

Happy to explain it in more detail if required. Let me know if there are any updates you'd like made.

[coveralls]

Coverage remained the same at 100.0% when pulling c39fcdc on HorizonXP:commonschunk-loading into 09001fe on markdalgleish:master.

[HorizonXP]

I'm not sure why the basic-promise test is failing, since it runs perfectly on my local machine. However, I'm running a newer version of node than Travis CI.

$ node --version
v7.7.3
$ npm --version
4.1.2

[cpsubrian]

Anything I can do to help here? Would love to be able to split my vendors out and I'm running into the ERROR in ReferenceError: webpackJsonp is not defined issue.

[HorizonXP]

@cpsubrian could you check to see why the above test is failing? Other than that, just waiting for the pull request to be accepted. You can use my fork in the meantime. It's working great for me.

[zacksiri]

@HorizonXP i'm getting this error

ERROR in TypeError: Cannot read property 'call' of undefined

[zacksiri]

@HorizonXP i'm getting this error

ERROR in TypeError: Cannot read property 'call' of undefined

[izeau]

@zacksiri please try #115, it should fix your issue.

[heisian]

This is what worked for me, no PR or modifications needed to static-site-generator:

// Webpack root config
{
  entry: {
    webApp: './index',
    prerenderedApp: './static',
  }
  ...
}

// Webpack plugins
const plugins = [
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    chunks: ['vendor', 'webApp'],
    minChunks: (module) => {
      return module.context && module.context.includes('node_modules');
    },
  }),

  new webpack.optimize.CommonsChunkPlugin({
    name: 'manifest',
    chunks: ['vendor', 'webApp'],
    minChunks: Infinity,
  }),

  new StaticSiteGeneratorPlugin({
    entry: 'prerenderedApp',
    paths: [
      '/',
      '/about',
      '/faq',
      '/terms',
      '/login',
      '/privacy',
    ],
    locals: {
      fs, // Pass in file system to load a template in static.js
      clientPath: config.paths.client(),
      contentSecurityPolicy,
    },
    globals: {
      window: {
        navigator: {},
        matchMedia: () => ({}),
        addEventListener: () => {
        },
        analytics: {
          page: () => {
          },
        },
      },
    },
 }),
];

This configuration lets me build chunked manifest, vendor, and webApp bundles, while at the same time generating a non-chunked prerenderedApp bundle that static-site-generator-webpack-plugin can use to output prerendered HTML.

Thus, both static and dynamic apps are generated in one compilation.

[robwierzbowski]

@heisian Thanks for the example! Are you still using static-site-generator-webpack-plugin, and if so any more learnings? We're trying to set ours up this way with Webpack 4, have been running into some issues. Right now we're trying two webpack configs and then hacking after bundles are generated. Interesting idea to stub window.

[heisian]

Yes, I don't think the build config has changed much since.

[heisian]

I haven't tried Webpack 4 yet.. not sure what changes would be needed for the config.. was just getting used to Webpack 3...