title: How to have dynamic code splitting with babel and webpack?
body: <p>I am trying to get dynamic code splitting using webpack 4 and babel 6 through babel-loader and it's kind of impossible. Look at this code:</p>
  
  <pre><code>import Chunk1 from './chunks/Chunk1'
  import('./chunks/Chunk2')
      .then( module =&gt; {
          Chunk2('Asynch')
      })
  ;
  
  Chunk1('Sync')
  </code></pre>
  
  <p>Webpack split it in 2 chunks if I don't use babel-loader, but when babel-loader get into the mix the bundle splitting is over. This is the way I add babel-loader to the webpack configuration:</p>
  
  <pre><code>{
    entry: {
      main: path.resolve(appDirectory, 'chunkTest.js')
    },
  
    output: {
      filename: '[name].bundle.js',
      chunkFilename: '[name].chunk.js',
      path: path.resolve(appDirectory, 'dist')
    },
  
    module: {
      rules: [{
        test: /\.m?js$/,
        include: [
          path.resolve(appDirectory, 'chunkTest.js'),
          path.resolve(appDirectory, 'chunks')
        ],
        use: {
          loader: 'babel-loader',
          options: {
            // No options at all
          }
        }
      ]
    },
  }
  </code></pre>
  
  <p>I've been trying for days with no luck, any help is much appreciated. What am I doing wrong?</p>