title: Limit the number of chunks in Webpack 4
body: <p>I'm splitting my single page app by means of dynamic imports. I want all of them to be bundled within a single extra file other than the main bundle. Which means, I would end up with something like:</p>
  
  <ul>
  <li>app.e82eb13a2342391fab679.js - main bundle</li>
  <li>0.c399423423532432c1da433.js - all the code-splitted chunks in a single bundle</li>
  </ul>
  
  <p>In my Webpack 2 configuration, I accomplish it with this config:</p>
  
  <pre><code>plugins: [
    new CommonsChunkPlugin({
      names: ['app'],
      children: true,
      async: true,
    }),
    new LimitChunkCountPlugin({
      maxChunks: 3
    }),
  ]
  </code></pre>
  
  <p>In Webpack 4, I tried limiting the extra chunks to 1 using this config:</p>
  
  <pre><code>optimization: {
    splitChunks: {
      chunks: 'async',
      minSize: 100000,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 1,
      maxInitialRequests: 1,
      automaticNameDelimiter: '~',
      name: true,
      cacheGroups: {
      }
    }
  }
  </code></pre>
  
  <p>But I still end up with unwanted extra chunks:</p>
  
  <pre><code> 2.c99478cc68a70c1da433.js   1.97 MiB       2  [emitted]  [big]  
   3.913a2df562e62d9338e3.js   1.56 MiB       3  [emitted]  [big]  
   4.4acc069c6a8aa5662198.js     48 KiB       4  [emitted]         
   app.e82eb13a526791fab679.js   1.31 MiB     0  [emitted]  [big]  app
  </code></pre>