title: Webpack webpackChunkName magic comment does not work
body: <p>I am trying to use react loadable and dynamic import to split code to multiple bundles. The split process works very well. However, when I try to use the magic comment <code>webpackChunkName</code> to let Webpack customize the bundle names, it always name my bundles like 0.bundle.js 1.bundle.js ....</p>
  
  <p>I used <code>chunkFilename: '[name].bundle.js'</code> in my <code>webpack.config.js</code> and also explicitly put "<code>comments: true</code>" in my .babelrc</p>
  
  <p>After a whole day's research, I really feel frustrated. Really appreciate if someone has a clue.</p>
  
  <p>Here is my configuration</p>
  
  <p><strong>webpack.config.js</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>entry: [
      'react-hot-loader/patch',
      './app/index.js'
    ],
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: '[name].bundle.js',
      chunkFilename: '[name].bundle.js',
      publicPath: '/'
    },</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>.babelrc</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code> {
    "presets": [
      ["env", {"modules": false}],
      "react"
    ],
    "plugins": ["transform-class-properties", "transform-object-rest-spread", "react-hot-loader/babel", "syntax-dynamic-import", "dynamic-import-webpack"],
    "env": {
      "test": {
        "presets": [
          "env",
          "react"
        ],
        "plugins": ["transform-class-properties", "transform-object-rest-spread", "dynamic-import-webpack"]
      }
    },
    "comments": true
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Router file</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>const Login = Loadable({
    loader: () =&gt; import(/* webpackChunkName: 'LoginContainer' */ './containers/LoginContainer'),
    loading: LoadingAnimation,
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>The building result:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/NQDZk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NQDZk.png" alt="enter image description here"></a></p>
  
  <p>Am I missing anything here?</p>