title: Webpack 4 - create vendor chunk
body: <p>In a webpack 3 configuration I would use the code below to create separate <code>vendor.js</code> chunk:</p>
  
  <pre><code>entry: {
      client: ['./client.js'],
      vendor: ['babel-polyfill', 'react', 'react-dom', 'redux'],
  },
  
  output: {
    filename: '[name].[chunkhash].bundle.js',
    path: '../dist',
    chunkFilename: '[name].[chunkhash].bundle.js',
    publicPath: '/',
  },
  
  plugins: [
      new webpack.HashedModuleIdsPlugin(),
      new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor',
      }),
      new webpack.optimize.CommonsChunkPlugin({
        name: 'runtime',
      }),
  ],
  </code></pre>
  
  <p>With all the changes I'm not sure how to do it with Webpack 4. I know that <code>CommonChunksPlugin</code> was removed, so there is a different way to achieve that. I've also read <a href="https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693" rel="noreferrer">this tutorial</a> but I'm still not sure about extracting runtime chunk and properly defining <code>output</code> property.</p>
  
  <p><strong>EDIT:</strong>
  Unfortunately, I was experiencing issues with the most popular answer here. Check out <a href="https://stackoverflow.com/a/48986526/4443323">my answer</a>.</p>