<p dir="auto">I chatted about this with <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/bebraw/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/bebraw">@bebraw</a> on gitter, and he said to bring it here as a feature request.</p>
<p dir="auto">The problem is that async chunks are given non-descriptive names by default, with no way to override, except by using the old CJS-based <code class="notranslate">require.ensure</code> code splitting api.</p>
<p dir="auto">What would be ideal would be a way to let the developer come up with his or her own unique names for each async chunk.  Something like</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="output: {
    createAsyncChunkName: modulesContained =&gt; name
}"><pre class="notranslate"><code class="notranslate">output: {
    createAsyncChunkName: modulesContained =&gt; name
}
</code></pre></div>
<p dir="auto">Where webpack would pass all the modules in an async chunk to the provided function, which would be responsible for generating a unique name.  I assume if the generated names are ever duplicated, webpack would just error out.</p>
<p dir="auto">The use case boils down to being able to analyze build results.  My plan is to eventually get webpack in use at work, where we literally have hundreds of async split points.  I imagine there'd be value in having a feasible way to quickly identify which split point is in which chunk.</p>
<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong><br>
bug</p>


<p dir="auto"><strong>What is the current behavior?</strong><br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/283690/35739780-06fc0c4e-0833-11e8-8e7c-243fe5a33d81.png"><img width="707" alt="screen shot 2018-02-02 at 14 39 08" src="https://user-images.githubusercontent.com/283690/35739780-06fc0c4e-0833-11e8-8e7c-243fe5a33d81.png" style="max-width: 100%;"></a></p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong></p>



<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">I am using an ui-lib which uses react, in the app that has the business logic I have react as well. I am using CommonsChunkPlugin but I see the react 2 times in the vendors bundle.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="  entry: {
    app: ['babel-polyfill', path.join(__dirname, './../src/App.js')],
    vendor: ['react', 'react-dom', 'd3'],
  },"><pre class="notranslate"><code class="notranslate">  entry: {
    app: ['babel-polyfill', path.join(__dirname, './../src/App.js')],
    vendor: ['react', 'react-dom', 'd3'],
  },
</code></pre></div>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      filename: 'vendorbundle.js',
      chunks: ['vendor', 'app'],
      minChunks: 2,
    }),"><pre class="notranslate"><code class="notranslate">    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      filename: 'vendorbundle.js',
      chunks: ['vendor', 'app'],
      minChunks: 2,
    }),
</code></pre></div>
<p dir="auto">What is the best way to exclude it? Is that a normal behavior?</p>
<p dir="auto"><strong>Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System.</strong></p>
<p dir="auto">Webpack version 3</p>