title: Webpack 4 Code splitting generating separate vendor files for each route
body: <p>I am trying webpack 4 (4.0.1) with code splitting. I am using dynamic loading to load React components.The react components, in turn, are importing components from internal npm modules. For instance, 
  In my app I have the following routes.</p>
  
  <pre><code>&lt;Route exact path="/" component={Home} /&gt;
  &lt;Route path="/about" component={About} /&gt;
  &lt;Route path="/topics" component={Topics} /&gt;
  </code></pre>
  
  <p>In each <code>Home</code>, <code>About</code> and <code>Topics</code> components, I am importing a component from my internal npm module( let us say <code>int-home</code>, <code>int-about</code> etc ). </p>
  
  <p>export { App as default } from 'int-about';</p>
  
  <p>Now with this setup, webpack is spitting out extra vendor bundles corresponding to each dynamic import<a href="https://i.stack.imgur.com/cdign.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/cdign.jpg" alt="Bundle Analyser Details"></a> </p>
  
  <p>What could be possibly wrong with my webpack config? How can I make sure that single vendor bundle is churned out in my build? 
  Below is the webpack config for my main app.</p>
  
  <pre><code>const path = require('path');
  const webpack = require('webpack');
  const ExtractTextPlugin = require("extract-text-webpack-plugin");
  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
  
  module.exports = {
      entry :'./src/index.js',
      output : {
          filename: '[name].js',
          chunkFilename: '[name].js',
          path: path.resolve(__dirname, 'dist'),
          publicPath:'dist/',
          library : '',
          libraryTarget:'umd'
      },
      resolve:{ 
          extensions: ['.', '.js', '.jsx']
      },
      mode : process.env.NODE_ENV == 'production' ? 'production' : 'development',
      module : {
          rules : [
              { 
                  test: /\.css$/, 
                  use: ExtractTextPlugin.extract({
                      fallback: 'style-loader',
                      use: {
                          loader:'css-loader',
                          options:{
                              minimize : true,
                              sourceMap: true,
                              modules:true,
                              localIdentName: '--[hash:base64:8]'
                          }
                      }
                  })
              },
              { test: /\.jsx?$/, use: 'babel-loader' }     
          ]
      },
      optimization:{
          splitChunks:{
              cacheGroups:{
                  vendor: {
                      chunks: 'initial',
                      test: path.resolve(__dirname, 'node_modules'),
                      name: 'vendors',
                      enforce: true,
                  },
              }, 
          }
      },
      plugins:[
          new ExtractTextPlugin({
              filename:"[name].css",
              allChunks:true
          }),
          new webpack.EnvironmentPlugin({
              NODE_ENV: process.env.NODE_ENV,
          }),
          new BundleAnalyzerPlugin({
              analyzerMode : 'static'
          })
      ]
  }
  </code></pre>