question splitchunk

question-splitchunk.md

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?