<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>
Chunks generated by <code class="notranslate">System.import</code> or <code class="notranslate">import</code> do not affected by CommonsChunkPlugin.</p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong><br>
<a href="https://github.com/rzcoder/webpack_chunks_issue">demo rep</a></p>
<p dir="auto"><em>sources structure</em></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="src
  |- modules
  |     |- module0.js
  |     |- module1.js
  |- index.js"><pre class="notranslate"><code class="notranslate">src
  |- modules
  |     |- module0.js
  |     |- module1.js
  |- index.js
</code></pre></div>
<p dir="auto"><em>webpack.config.js</em></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const path = require('path');
const webpack = require(&quot;webpack&quot;);

module.exports = {
    entry: {
        index: './src/index.js'
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: 'dist/'
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: &quot;vendors&quot;,
            minChunks: function(module) {
                return module.resource &amp;&amp; (/node_modules/).test(module.resource);
            }
        })
    ]
};
"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">path</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'path'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-s1">webpack</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"webpack"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-c1">exports</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
    <span class="pl-c1">entry</span>: <span class="pl-kos">{</span>
        <span class="pl-c1">index</span>: <span class="pl-s">'./src/index.js'</span>
    <span class="pl-kos">}</span><span class="pl-kos">,</span>
    <span class="pl-c1">output</span>: <span class="pl-kos">{</span>
        <span class="pl-c1">filename</span>: <span class="pl-s">'[name].js'</span><span class="pl-kos">,</span>
        <span class="pl-c1">path</span>: <span class="pl-s1">path</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-s1">__dirname</span><span class="pl-kos">,</span> <span class="pl-s">'dist'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
        <span class="pl-c1">publicPath</span>: <span class="pl-s">'dist/'</span>
    <span class="pl-kos">}</span><span class="pl-kos">,</span>
    <span class="pl-c1">plugins</span>: <span class="pl-kos">[</span>
        <span class="pl-k">new</span> <span class="pl-s1">webpack</span><span class="pl-kos">.</span><span class="pl-c1">optimize</span><span class="pl-kos">.</span><span class="pl-c1">CommonsChunkPlugin</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
            <span class="pl-c1">name</span>: <span class="pl-s">"vendors"</span><span class="pl-kos">,</span>
            <span class="pl-en">minChunks</span>: <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">module</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
                <span class="pl-k">return</span> <span class="pl-s1">module</span><span class="pl-kos">.</span><span class="pl-c1">resource</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-kos">(</span><span class="pl-pds"><span class="pl-c1">/</span>node_modules<span class="pl-c1">/</span></span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">test</span><span class="pl-kos">(</span><span class="pl-s1">module</span><span class="pl-kos">.</span><span class="pl-c1">resource</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
            <span class="pl-kos">}</span>
        <span class="pl-kos">}</span><span class="pl-kos">)</span>
    <span class="pl-kos">]</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div>
<p dir="auto"><em>index.js</em></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="for (let i = 0; i &lt; 2; i++) {
    System.import(&quot;./modules/module&quot; + i).then((module) =&gt; module.default());
}"><pre class="notranslate"><span class="pl-k">for</span> <span class="pl-kos">(</span><span class="pl-k">let</span> <span class="pl-s1">i</span> <span class="pl-c1">=</span> <span class="pl-c1">0</span><span class="pl-kos">;</span> <span class="pl-s1">i</span> <span class="pl-c1">&lt;</span> <span class="pl-c1">2</span><span class="pl-kos">;</span> <span class="pl-s1">i</span><span class="pl-c1">++</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-v">System</span><span class="pl-kos">.</span><span class="pl-en">import</span><span class="pl-kos">(</span><span class="pl-s">"./modules/module"</span> <span class="pl-c1">+</span> <span class="pl-s1">i</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">then</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">module</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-s1">module</span><span class="pl-kos">.</span><span class="pl-en">default</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto"><em>modules/module0.js</em> &amp;&amp; <em>modules/module1.js</em></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import * as _ from &quot;lodash&quot;;
export default () =&gt; console.log(_.random(100));"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-c1">*</span> <span class="pl-k">as</span> <span class="pl-s1">_</span> <span class="pl-k">from</span> <span class="pl-s">"lodash"</span><span class="pl-kos">;</span>
<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s1">_</span><span class="pl-kos">.</span><span class="pl-en">random</span><span class="pl-kos">(</span><span class="pl-c1">100</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">Generated chunks for module0 &amp; module1 both has copy of <code class="notranslate">lodash</code> and vendors.js is empty.</p>
<p dir="auto"><strong>What is the expected behavior?</strong><br>
Dynamically generated chunks must be affected by CommonsChunkPlugin in same way as entry points.</p>
<p dir="auto"><strong>Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System.</strong><br>
node 7.0.0, webpack 2.2.1, OSX</p>
<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong></p>
<p dir="auto">Feature for <code class="notranslate">CommonChunkPlugin</code>.</p>
<p dir="auto">Support selecting modules from <strong>non-entry</strong> chunks. Meaning, select statically imported modules from chunks that were created from a <strong>dynamic</strong> import (<code class="notranslate">require.ensure</code> / <code class="notranslate">System.import</code> / <code class="notranslate">import("..")</code>)</p>
<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">Currently <code class="notranslate">CommonChunkPlugin</code> only receives modules imported from <strong>entry</strong> chunks.</p>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto"><code class="notranslate">CommonChunkPlugin</code> should receive also modules from <strong>non-entry</strong> chunks.<br><br>
Another option will be that the default behavior will be that the plugin won't be getting these modules and only with passing something like <code class="notranslate">selectAllChunks: true</code> will enable this behavior.</p>
<p dir="auto"><strong>If this is a feature request, what is motivation or use case for changing the behavior?</strong></p>
<p dir="auto">Most of the examples out there talks about CodeSplitting but not talking about CodeSplitting with lazy loading. For example, load your main page as an entry chunk, and split the rest of your website routes to different chunks and only load those on demand.</p>
<p dir="auto">You see the important need for this feature when you're trying to make a <code class="notranslate">vendors</code> chunk that will include the vendors from ALL the chunks including the ones for the different routes that are being created from a dynamic import as a split point.</p>
<p dir="auto">In our opinion the best solution to create the <code class="notranslate">vendors</code> chunk will be using the <code class="notranslate">minChunks</code> function since the other two (specifying hard coded which packages to take / import <code class="notranslate">package.json</code>.dependencies) has a lot of issues with and this is the most dynamic way to do it:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendors',
      minChunks: ({ resource }) =&gt; /node_modules/.test(resource)
    })"><pre class="notranslate">    <span class="pl-k">new</span> <span class="pl-s1">webpack</span><span class="pl-kos">.</span><span class="pl-c1">optimize</span><span class="pl-kos">.</span><span class="pl-c1">CommonsChunkPlugin</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
      <span class="pl-c1">name</span>: <span class="pl-s">'vendors'</span><span class="pl-kos">,</span>
      <span class="pl-en">minChunks</span>: <span class="pl-kos">(</span><span class="pl-kos">{</span> resource <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-pds"><span class="pl-c1">/</span>node_modules<span class="pl-c1">/</span></span><span class="pl-kos">.</span><span class="pl-en">test</span><span class="pl-kos">(</span><span class="pl-s1">resource</span><span class="pl-kos">)</span>
    <span class="pl-kos">}</span><span class="pl-kos">)</span></pre></div>
<p dir="auto">The problem is that since <code class="notranslate">CommonsChunkPlugin</code> only gets modules form the <strong>entry</strong> chunks, so all the vendors from our different split points are not being added to this chunk.</p>
<p dir="auto">The motivation around this feature request is that others won't need to do the workaround I'll show here.</p>
<p dir="auto"><strong>Proposed temporary workaround and why it's not that good. Writing it here anyway so who ever needs it will see it and would be able to use it</strong></p>
<p dir="auto">What the lack of this feature forces us to do it for every dynamic import we're doing (using <code class="notranslate">import("path")</code>) we're also going and creating an entry chunk for it. Just so the above code will work.</p>
<p dir="auto">Then, all of these "duplicate" chunks we're excluding from being added to the HTML using the <code class="notranslate">excludeChunks</code> of <code class="notranslate">HtmlWebpackPlugin</code></p>
<p dir="auto">So it basically looks like this:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="...

// Why do we need to exclude these entries?
// The entries here are being dynamically loaded per route in the application so we would like to set
// them to be excluded form HtmlWebpackPlugin auto inject of entry chunks.
//
// If they are being dynamically loaded in the system, so why do you need them here at all?
// We're creating a `vendors` chunk automatically from what being imported from `node_modules`, in order for webpack
// to know about what code exists in these route chunks we need to set them as entries here.
// That way we're getting everything we ever wanted! The `vendors` is being created out of ALL the vendors in the system,
// and we're still able to dynamically load these chunks per route without having them injected to index.html at the beginning.
const excludeEntries = {
  main: [path.join(chunksPath, 'main_chunk')],
  A_template_collection: [path.join(pagesPath, 'TemplateCollectionPage')],
  A_template_wizard: [path.join(pagesPath, 'TemplateWizardPage')],
  A_edit_template: [path.join(pagesPath, 'TemplateEditPage')],
  A_create_instance: [path.join(pagesPath, 'CreateInstancePage')],
  B_issues_collection: [path.join(pagesPath, 'IssuesCollectionPage')]
};

const entry = Object.assign({}, excludeEntries, {
  application: [path.join(chunksPath, 'application_chunk')]
});

const config = {
    entry,
    ...
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
          name: 'vendors',
          minChunks: ({ resource }) =&gt; /node_modules/.test(resource)
        }),
        new HtmlWebpackPlugin({
          title: indexHtmlTitle,
          resourceHintsMetaTags,
          inject: true,
          template: indexHtmlPath,
          excludeChunks: Object.keys(excludeEntries)
        }),
    ]
    ...
}
"><pre class="notranslate">...

<span class="pl-c">// Why do we need to exclude these entries?</span>
<span class="pl-c">// The entries here are being dynamically loaded per route in the application so we would like to set</span>
<span class="pl-c">// them to be excluded form HtmlWebpackPlugin auto inject of entry chunks.</span>
<span class="pl-c">//</span>
<span class="pl-c">// If they are being dynamically loaded in the system, so why do you need them here at all?</span>
<span class="pl-c">// We're creating a `vendors` chunk automatically from what being imported from `node_modules`, in order for webpack</span>
<span class="pl-c">// to know about what code exists in these route chunks we need to set them as entries here.</span>
<span class="pl-c">// That way we're getting everything we ever wanted! The `vendors` is being created out of ALL the vendors in the system,</span>
<span class="pl-c">// and we're still able to dynamically load these chunks per route without having them injected to index.html at the beginning.</span>
<span class="pl-k">const</span> <span class="pl-s1">excludeEntries</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
  <span class="pl-c1">main</span>: <span class="pl-kos">[</span><span class="pl-s1">path</span><span class="pl-kos">.</span><span class="pl-en">join</span><span class="pl-kos">(</span><span class="pl-s1">chunksPath</span><span class="pl-kos">,</span> <span class="pl-s">'main_chunk'</span><span class="pl-kos">)</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
  <span class="pl-c1">A_template_collection</span>: <span class="pl-kos">[</span><span class="pl-s1">path</span><span class="pl-kos">.</span><span class="pl-en">join</span><span class="pl-kos">(</span><span class="pl-s1">pagesPath</span><span class="pl-kos">,</span> <span class="pl-s">'TemplateCollectionPage'</span><span class="pl-kos">)</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
  <span class="pl-c1">A_template_wizard</span>: <span class="pl-kos">[</span><span class="pl-s1">path</span><span class="pl-kos">.</span><span class="pl-en">join</span><span class="pl-kos">(</span><span class="pl-s1">pagesPath</span><span class="pl-kos">,</span> <span class="pl-s">'TemplateWizardPage'</span><span class="pl-kos">)</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
  <span class="pl-c1">A_edit_template</span>: <span class="pl-kos">[</span><span class="pl-s1">path</span><span class="pl-kos">.</span><span class="pl-en">join</span><span class="pl-kos">(</span><span class="pl-s1">pagesPath</span><span class="pl-kos">,</span> <span class="pl-s">'TemplateEditPage'</span><span class="pl-kos">)</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
  <span class="pl-c1">A_create_instance</span>: <span class="pl-kos">[</span><span class="pl-s1">path</span><span class="pl-kos">.</span><span class="pl-en">join</span><span class="pl-kos">(</span><span class="pl-s1">pagesPath</span><span class="pl-kos">,</span> <span class="pl-s">'CreateInstancePage'</span><span class="pl-kos">)</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
  <span class="pl-c1">B_issues_collection</span>: <span class="pl-kos">[</span><span class="pl-s1">path</span><span class="pl-kos">.</span><span class="pl-en">join</span><span class="pl-kos">(</span><span class="pl-s1">pagesPath</span><span class="pl-kos">,</span> <span class="pl-s">'IssuesCollectionPage'</span><span class="pl-kos">)</span><span class="pl-kos">]</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-s1">entry</span> <span class="pl-c1">=</span> <span class="pl-v">Object</span><span class="pl-kos">.</span><span class="pl-en">assign</span><span class="pl-kos">(</span><span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-s1">excludeEntries</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
  <span class="pl-c1">application</span>: <span class="pl-kos">[</span><span class="pl-s1">path</span><span class="pl-kos">.</span><span class="pl-en">join</span><span class="pl-kos">(</span><span class="pl-s1">chunksPath</span><span class="pl-kos">,</span> <span class="pl-s">'application_chunk'</span><span class="pl-kos">)</span><span class="pl-kos">]</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-s1">config</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
    <span class="pl-s1">entry</span><span class="pl-kos">,</span>
    ...
    <span class="pl-s1">plugins</span>: <span class="pl-kos">[</span>
        <span class="pl-k">new</span> <span class="pl-s1">webpack</span><span class="pl-kos">.</span><span class="pl-c1">optimize</span><span class="pl-kos">.</span><span class="pl-c1">CommonsChunkPlugin</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
          <span class="pl-c1">name</span>: <span class="pl-s">'vendors'</span><span class="pl-kos">,</span>
          <span class="pl-en">minChunks</span>: <span class="pl-kos">(</span><span class="pl-kos">{</span> resource <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-pds"><span class="pl-c1">/</span>node_modules<span class="pl-c1">/</span></span><span class="pl-kos">.</span><span class="pl-en">test</span><span class="pl-kos">(</span><span class="pl-s1">resource</span><span class="pl-kos">)</span>
        <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
        <span class="pl-k">new</span> <span class="pl-v">HtmlWebpackPlugin</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
          <span class="pl-c1">title</span>: <span class="pl-s1">indexHtmlTitle</span><span class="pl-kos">,</span>
          resourceHintsMetaTags<span class="pl-kos">,</span>
          <span class="pl-c1">inject</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
          <span class="pl-c1">template</span>: <span class="pl-s1">indexHtmlPath</span><span class="pl-kos">,</span>
          <span class="pl-c1">excludeChunks</span>: <span class="pl-v">Object</span><span class="pl-kos">.</span><span class="pl-en">keys</span><span class="pl-kos">(</span><span class="pl-s1">excludeEntries</span><span class="pl-kos">)</span>
        <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
    <span class="pl-kos">]</span>
    ...
<span class="pl-kos">}</span></pre></div>
<p dir="auto">The dynamic imports are being used on the same paths as the entry chunks that are being excluded from the html.</p>
<p dir="auto">This causes some difficulties for us:</p>
<ol dir="auto">
<li>If you dynamically import something and forget to put it here as well it will not go into the vendors chunks and you'll lose cache</li>
<li>This creates for us chunks that we're not actually using. So for the same code I'll have the named entry chunk and I'll also have a chunk from the dynamic import. I'm not using the named entry-chunks but it's just noise to me.<br>
That is even bigger when also using the ExtractTextPlugin.</li>
</ol>
<p dir="auto">I looked also here: <a href="https://github.com/oieduardorabelo/webpack-commonschunkplugin-dynamic-splitting">https://github.com/oieduardorabelo/webpack-commonschunkplugin-dynamic-splitting</a><br>
But that seems to not be related since in our case the only real entry point (<code class="notranslate">application: [path.join(chunksPath, 'application_chunk')]</code>) is basically just loading polyfills + loading the <code class="notranslate">main</code> chunk path dynamically. Since all the <code class="notranslate">application</code> chunk is doing is mainly dynamically <code class="notranslate">import()</code> stuff it has no static imports of files from <code class="notranslate">node_modules</code>. So CommonChunkPlugin doesn't catch that..</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>
<ul dir="auto">
<li>OS: macOS 10.12.3</li>
<li>Node.js version: 6.9.10</li>
<li>Webpack version: 2.2.1</li>
<li>Browser not relavant</li>
</ul>