Guides - Tweak Code Splitting to Extract Boilerplate

[cyrilchapon]

Expanding on #1333

This page states that

A lesser-known feature of the CommonsChunkPlugin is extracting webpack's boilerplate and manifest [...] by specifying a name not mentioned in the entry configuration, the plugin will automatically extract what we want into a separate bundle

This is actually incorrect. It extracts "what we want" (ie. the webpack boilerplate, in this section called "extracting webpack boilerplate"), indeed by "specifying a name not mentioned in the entry configuration", but only along with "creating another CommonChunkPlugin" before..

I may be stupid, but I spent 2 weeks struggling on it because I wouldn't find this piece of information, and I ended finding it inside the (closed, merged) issue mentionned above, so I think community could benefit from this experience :)

Even the provided example only works as long as we don't have any dependency :

  const path = require('path');
  const webpack = require('webpack');

  module.exports = {
    entry: './src/index.js',
    plugins: [
     new webpack.optimize.CommonsChunkPlugin({
       name: 'manifest'
     })
    ],
    output: {
      filename: '[name].[chunkhash].js',
      path: path.resolve(__dirname, 'dist')
    }
  };

In my simple case, this produces a 500Kb manifest.js with Zepto, lodash, and typically every stuff I'm aiming to eliminate from this base, common, synchronously imported, render blocking, non-changing, cached bundle... 😆

As @jakearchibald stated in his issue, there must be another CommonChunkPlugin that takes the rest, placed before, for this to work :

  const path = require('path');
  const webpack = require('webpack');

  module.exports = {
    entry: './src/index.js',
    plugins: [
     //Takes any common stuff
     new webpack.optimize.CommonsChunkPlugin({
       name: 'common'
     }),
     //Takes webpack boilerplate
     new webpack.optimize.CommonsChunkPlugin({
       name: 'manifest'
     })
    ],
    output: {
      filename: '[name].[chunkhash].js',
      path: path.resolve(__dirname, 'dist')
    }
  };

I'm pretty new to webpack so, feel free to correct me if I'm wrong.

But as a newbie on this, this experience shall be a good show case and test case for documentation.

[cyrilchapon]

More found here, but the piece of information is parasited with the node_modules conditional stuff.

Copy-pasting that example would lead in a manifest.js free from vendor code, but not free from entry-common code like

index1.js

require('./mylib.js')

index2.js

require('./mylib.js')

mylib.js is thus inside manifest.js

[skipjack]

Yes, I believe you're correct that that two instances of the CommonsChunkPlugin are required. Would you be willing to submit a PR to update the guide? If you could, make sure to change not only the code example but the lead-in and follow up discussion as well so it's clear what's going on.

[cyrilchapon]

Hey :)

Thanks about that answer and sorry for the delay.

I might have a chance to take time today :) I'll keep in touch

[montogeek]

@cyrilchapon Still interested?

[EugeneHlushko]

This aint valid anymore, CCP is deprecated