Skip to content

Instantly share code, notes, and snippets.

@jconroy jconroy/question-splitchunk.md Secret
Last active Mar 1, 2018

Embed
What would you like to do?
question splitchunk

I'm trying to make use of webpack 4.0.1 and the new splitChunk functionality.

I'm trying to achieve a structure like

  • [hash].js (chunk3)
  • [hash].js (chunk2)
  • [hash].js (chunk1)
  • [hash].js (chunk0 vendor etc.)
  • common.js
  • entry1.js
  • entry2.js

Previously I could achieve this using the CommonsChunkPlugin with a config like:

output: {
    filename: './assets/js/[name].js',
    chunkFilename: './assets/js/[chunkhash].js',
},
plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      filename: './assets/js/common.js',
      name: 'common'
    })
]

But now the closest I can get is

  • 3.js
  • 2.js
  • 1.js
  • 0.js (vendor)
  • common.js
  • entry1.js
  • entry2.js

With a configuation like:

output: {
    filename: '[name].js',
},
 optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          name: 'common',
          chunks: 'initial',
          minChunks: 2
        },
      }
    }

As soon as I change the chunk output name to a hash e.g.

output: {
    filename: '[name].js',
    chunkFilename: '[chunkhash].js',
},

The common chunk changes as well and I get

  • [hash].js (chunk3)
  • [hash].js (chunk2)
  • [hash].js (chunk1)
  • [hash].js (chunk0 vendor etc.)
  • [hash].js (common)
  • entry1.js
  • entry2.js

I need the common chunk to be a known name (I can manage cache busting other ways)

Halp?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.