<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>
When using splitChunks, if dealing with a simple project it's working but in more complexe project with multiples inclusions, some dependencies are created for entry points that are not needed. The old commonChunk plugin was behaving correctly.<br>
Exemple :</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const groupsOptions = {chunks: &quot;all&quot;, minSize:0, minChunks: 1, reuseExistingChunk: true, enforce: true};

const reactConfig = {
    entry: {
        &quot;react&quot;: [&quot;react&quot;, &quot;react-dom&quot;],
        &quot;pageA&quot;: &quot;./src/A.jsx&quot;,
		&quot;pageB&quot;: &quot;./src/B.jsx&quot;,
        &quot;pageC&quot;: &quot;./src/C.jsx&quot;,
        &quot;pageD&quot;: &quot;./src/D.jsx&quot;,
        &quot;commonAB&quot;: [ &quot;./src/ab_a.js&quot;, &quot;./src/ab_b.js&quot;],
        &quot;commonCD&quot;: [&quot;./src/cd_c.js&quot;, &quot;./src/cd_d.js&quot;]
    },
    output: {
        path: __dirname + '/build/',
        filename: PROD
            ? &quot;[name].min.js&quot;
            : &quot;[name].js&quot;
    },
    module: {
        rules: [
            {
                test: /\.jsx$/,
                use: {
                    loader: &quot;babel-loader&quot;,
                    options: {
                        presets: [&quot;es2015&quot;, &quot;react&quot;]
                    }
                }
            }
        ]
    },
    optimization: {
        splitChunks: {
            cacheGroups:{
                react: {test:'react', name: &quot;react&quot;, ...groupsOptions},
                AB: {test:'commonAB', name: &quot;commonAB&quot;, ...groupsOptions},
                CD: {test:'commonCD', name: &quot;commonCD&quot;, ...groupsOptions}
            }
        }
    },
    plugins: [
    ]
};

module.exports = reactConfig;"><pre class="notranslate"><code class="notranslate">const groupsOptions = {chunks: "all", minSize:0, minChunks: 1, reuseExistingChunk: true, enforce: true};

const reactConfig = {
    entry: {
        "react": ["react", "react-dom"],
        "pageA": "./src/A.jsx",
		"pageB": "./src/B.jsx",
        "pageC": "./src/C.jsx",
        "pageD": "./src/D.jsx",
        "commonAB": [ "./src/ab_a.js", "./src/ab_b.js"],
        "commonCD": ["./src/cd_c.js", "./src/cd_d.js"]
    },
    output: {
        path: __dirname + '/build/',
        filename: PROD
            ? "[name].min.js"
            : "[name].js"
    },
    module: {
        rules: [
            {
                test: /\.jsx$/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["es2015", "react"]
                    }
                }
            }
        ]
    },
    optimization: {
        splitChunks: {
            cacheGroups:{
                react: {test:'react', name: "react", ...groupsOptions},
                AB: {test:'commonAB', name: "commonAB", ...groupsOptions},
                CD: {test:'commonCD', name: "commonCD", ...groupsOptions}
            }
        }
    },
    plugins: [
    ]
};

module.exports = reactConfig;
</code></pre></div>
<p dir="auto">This produce :<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/16226590/38137465-04162fc8-3425-11e8-9eb0-ade205bed7c4.png"><img src="https://user-images.githubusercontent.com/16226590/38137465-04162fc8-3425-11e8-9eb0-ade205bed7c4.png" alt="image" style="max-width: 100%;"></a><br>
This exemple is very simple and everything is OK !</p>
<ul dir="auto">
<li>pageA depends from pageA, react and commonAB -&gt; OK</li>
<li>pageB depends from pageB, react and commonAB -&gt; OK</li>
<li>pageC depends from pageC, react and commonCD -&gt; OK</li>
<li>pageD depends from pageD, react and commonCD -&gt; OK</li>
</ul>
<p dir="auto">But then, when i modified the code of ab_a.js and add</p>
<p dir="auto"><code class="notranslate">import React from 'react';</code></p>
<p dir="auto">the output is :</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/16226590/38137548-861455c2-3425-11e8-8bc1-1e4bfd98fd45.png"><img src="https://user-images.githubusercontent.com/16226590/38137548-861455c2-3425-11e8-8bc1-1e4bfd98fd45.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">As you can see pageC and pageD depends of commonAB.js that is not the case (again with commonChunks plugin it was behaving correctly) !</p>
<ul dir="auto">
<li>pageA depends from pageA, react and commonAB -&gt; OK</li>
<li>pageB depends from pageB, react and commonAB -&gt; OK</li>
<li>pageC depends from pageC, react and commonAB AND commonCD -&gt; Wrong</li>
<li>pageD depends from pageD, react and commonAB AND commonCD -&gt; Wrong</li>
</ul>
<p dir="auto">Same result when i modified the code of cd_d.js and add <code class="notranslate">import React from 'react';</code> the output is :<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/16226590/38137622-052c6d90-3426-11e8-9afd-9f60db78227f.png"><img src="https://user-images.githubusercontent.com/16226590/38137622-052c6d90-3426-11e8-9afd-9f60db78227f.png" alt="image" style="max-width: 100%;"></a></p>
<ul dir="auto">
<li>pageA depends from pageA, react and commonAB AND commonCD -&gt; Wrong</li>
<li>pageB depends from pageB, react and commonAB AND commonCD -&gt; Wrong</li>
<li>pageC depends from pageC, react and commonCD AND commonAB -&gt; Wrong</li>
<li>pageD depends from pageD, react and commonCD AND commonAB -&gt; Wrong</li>
</ul>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong><br>
Here sources to reproduce the bug :<br>
<a href="https://github.com/webpack/webpack/files/1863545/testCommon.zip">testCommon.zip</a></p>



<p dir="auto"><strong>What is the expected behavior?</strong><br>
With <code class="notranslate">import React from 'react';</code> in ab_a.js, ab_b.js, cd_c.js and cd_d.js dependencies should be :</p>
<ul dir="auto">
<li>pageA depends from pageA, react and commonAB</li>
<li>pageB depends from pageB, react and commonAB</li>
<li>pageC depends from pageC, react and commonCD</li>
<li>pageD depends from pageD, react and commonCD</li>
</ul>
<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"><strong>Please mention other relevant information such as the browser version, Node.js version, webpack version, and Operating System.</strong><br>
OS : Window 10<br>
Webpack : 4.4.1<br>
Node : 8.9.4</p>
<p dir="auto">I need to make two versions of a bundle using different loaders.</p>
<p dir="auto">Is there a way to define bundle specific loaders?</p>
<p dir="auto">The only way I can think of that this can be done at the moment is two have two separate webpack configurations and run webpack build twice. This is far from ideal since this duplicates compilation of all assets.</p>