<h2 dir="auto">Need</h2>
<div class="highlight highlight-text-gherkin-feature notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="As a developer
I want to reduce duplication in my configs
So that they're more maintainable."><pre class="notranslate">As a developer
<span class="pl-k">I </span>want to reduce duplication in my configs
So that they're more maintainable.</pre></div>
<h2 dir="auto">Deliverables</h2>
<div class="highlight highlight-text-gherkin-feature notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="Given I have config A
And I have config B
And config A defines variable 'FOO' to be 'A'
And config B defines variable 'FOO' to be 'B'
And config B extends config A
When I load config B through webpack
Then 'FOO' will be injected with the value 'B'"><pre class="notranslate"><span class="pl-k">Given </span>I have config A
<span class="pl-k">And </span>I have config B
<span class="pl-k">And </span>config A defines variable <span class="pl-s">'FOO'</span> to be <span class="pl-s">'A'</span>
<span class="pl-k">And </span>config B defines variable <span class="pl-s">'FOO'</span> to be <span class="pl-s">'B'</span>
<span class="pl-k">And </span>config B extends config A
<span class="pl-k">When </span>I load config B through webpack
<span class="pl-k">Then </span><span class="pl-s">'FOO'</span> will be injected with the value <span class="pl-s">'B'</span></pre></div>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// config A
module.exports = {
  plugins: [
    new DefinePlugin({FOO: 'A'})
  ]
};

// config B
var config = require('./a.config.js');
config.plugins.push(
  new DefinePlugin({FOO: 'B'})
);
module.exports = config;"><pre class="notranslate"><span class="pl-c">// config A</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">plugins</span>: <span class="pl-kos">[</span>
    <span class="pl-k">new</span> <span class="pl-v">DefinePlugin</span><span class="pl-kos">(</span><span class="pl-kos">{</span><span class="pl-c1">FOO</span>: <span class="pl-s">'A'</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-c">// config B</span>
<span class="pl-k">var</span> <span class="pl-s1">config</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'./a.config.js'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-s1">config</span><span class="pl-kos">.</span><span class="pl-c1">plugins</span><span class="pl-kos">.</span><span class="pl-en">push</span><span class="pl-kos">(</span>
  <span class="pl-k">new</span> <span class="pl-v">DefinePlugin</span><span class="pl-kos">(</span><span class="pl-kos">{</span><span class="pl-c1">FOO</span>: <span class="pl-s">'B'</span><span class="pl-kos">}</span><span class="pl-kos">)</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-s1">config</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">The more practical use cases is having a <code class="notranslate">production.config.js</code> and a <code class="notranslate">staging.config.js</code> with the latter extending the former. I have a <code class="notranslate">LOG_ERRORS</code> variable defined in <code class="notranslate">production.config.js</code> to be <code class="notranslate">false</code> and I want to overwrite it in <code class="notranslate">staging.config.js</code> to be <code class="notranslate">true</code>.</p>
<p dir="auto">The workaround I'm using now is to make sure the <code class="notranslate">DefinePlugin</code> instance is the last element in the <code class="notranslate">plugins</code> list in <code class="notranslate">production.config.js</code> and <code class="notranslate">pop()</code> it and replace it with another instance in <code class="notranslate">staging.config.js</code>. Not very future proof.</p>
<p dir="auto">What I'd like is for newer instances of <code class="notranslate">DefinePlugin</code> in the <code class="notranslate">plugins</code> list to overwrite any definitions set by previous instances.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="exports.plugins = [
  new DefinePlugin({FOO: 'A'}),
  new DefinePlugin({FOO: 'B'}),
  new DefinePlugin({FOO: 'C'})
];

// I expect `FOO` to be `C`."><pre class="notranslate"><span class="pl-s1">exports</span><span class="pl-kos">.</span><span class="pl-c1">plugins</span> <span class="pl-c1">=</span> <span class="pl-kos">[</span>
  <span class="pl-k">new</span> <span class="pl-v">DefinePlugin</span><span class="pl-kos">(</span><span class="pl-kos">{</span><span class="pl-c1">FOO</span>: <span class="pl-s">'A'</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">DefinePlugin</span><span class="pl-kos">(</span><span class="pl-kos">{</span><span class="pl-c1">FOO</span>: <span class="pl-s">'B'</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">DefinePlugin</span><span class="pl-kos">(</span><span class="pl-kos">{</span><span class="pl-c1">FOO</span>: <span class="pl-s">'C'</span><span class="pl-kos">}</span><span class="pl-kos">)</span>
<span class="pl-kos">]</span><span class="pl-kos">;</span>

<span class="pl-c">// I expect `FOO` to be `C`.</span></pre></div>
<h4 dir="auto">Notes</h4>
<p dir="auto">I looked at <a href="https://github.com/webpack/webpack/blob/c94f4df3b486dafaffb61f363acc5cde3026407b/lib/DefinePlugin.js">lib/definePluggin.js</a> and I saw that for <a href="https://github.com/webpack/webpack/blob/c94f4df3b486dafaffb61f363acc5cde3026407b/lib/DefinePlugin.js#L28">every definition</a> a <code class="notranslate">compiler.parser</code> callback is <a href="https://github.com/webpack/webpack/blob/c94f4df3b486dafaffb61f363acc5cde3026407b/lib/DefinePlugin.js#L68-L75">registered</a>. I'm assuming that when the first callback is called and modifies the code, the rest of the callbacks won't be called as the code doesn't match them anymore.</p>
<p dir="auto">I tried working out a solution where the callbacks request the latest definition of a <code class="notranslate">key</code>, but it required the assumption that the type of key (value, typeof etc) wouldn't change between definitions (because different callbacks handle different types).</p>
<p dir="auto">I'm more than happy to help with a PR if someone can point me in the right direction.</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">Bug / Change in behaviour compared to Webpack 3</p>
<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">When telling Webpack which chunk the runtime should be in, it doesn't appear to change the order of excecution - see below example.</p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong></p>
<h3 dir="auto">vendor.js</h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import $ from 'jquery';
console.log('vendor run.');
$.fn.sayHi = function() {
    alert('Hi');
};"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-s1">$</span> <span class="pl-k">from</span> <span class="pl-s">'jquery'</span><span class="pl-kos">;</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-s">'vendor run.'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-s1">$</span><span class="pl-kos">.</span><span class="pl-c1">fn</span><span class="pl-kos">.</span><span class="pl-en">sayHi</span> <span class="pl-c1">=</span> <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-en">alert</span><span class="pl-kos">(</span><span class="pl-s">'Hi'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div>
<h3 dir="auto">main.js</h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import $ from 'jquery';
console.log('main run.');
$.fn.sayHi();"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-s1">$</span> <span class="pl-k">from</span> <span class="pl-s">'jquery'</span><span class="pl-kos">;</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-s">'main run.'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-s1">$</span><span class="pl-kos">.</span><span class="pl-c1">fn</span><span class="pl-kos">.</span><span class="pl-en">sayHi</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<h3 dir="auto">index.htm</h3>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;html&gt;
&lt;body&gt;
&lt;script src=&quot;dist/vendor.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;dist/main.js&quot;&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">html</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">body</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">script</span> <span class="pl-c1">src</span>="<span class="pl-s">dist/vendor.js</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">script</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">script</span> <span class="pl-c1">src</span>="<span class="pl-s">dist/main.js</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">script</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">body</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">html</span><span class="pl-kos">&gt;</span></pre></div>
<h3 dir="auto">Webpack 3 config</h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var webpack = require('webpack');
var path = require('path');

module.exports = {

    mode: 'production',

    entry: {
        main: './main.js',
        vendor: './vendor.js'
    },

    output: {
        path: path.resolve(__dirname, './dist'),
        filename: '[name].js',
    },

    optimization: {
        minimize: false,
        runtimeChunk: {
            name: 'vendor'
        },
        splitChunks: {
            cacheGroups: {
                default: false,
                commons: {
                    test: /node_modules/,
                    name: &quot;vendor&quot;,
                    chunks: &quot;initial&quot;,
                    minSize: 1
                }
            }
        }
    }

};"><pre class="notranslate"><span class="pl-k">var</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-k">var</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-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">mode</span>: <span class="pl-s">'production'</span><span class="pl-kos">,</span>

    <span class="pl-c1">entry</span>: <span class="pl-kos">{</span>
        <span class="pl-c1">main</span>: <span class="pl-s">'./main.js'</span><span class="pl-kos">,</span>
        <span class="pl-c1">vendor</span>: <span class="pl-s">'./vendor.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">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">filename</span>: <span class="pl-s">'[name].js'</span><span class="pl-kos">,</span>
    <span class="pl-kos">}</span><span class="pl-kos">,</span>

    <span class="pl-c1">optimization</span>: <span class="pl-kos">{</span>
        <span class="pl-c1">minimize</span>: <span class="pl-c1">false</span><span class="pl-kos">,</span>
        <span class="pl-c1">runtimeChunk</span>: <span class="pl-kos">{</span>
            <span class="pl-c1">name</span>: <span class="pl-s">'vendor'</span>
        <span class="pl-kos">}</span><span class="pl-kos">,</span>
        <span class="pl-c1">splitChunks</span>: <span class="pl-kos">{</span>
            <span class="pl-c1">cacheGroups</span>: <span class="pl-kos">{</span>
                <span class="pl-c1">default</span>: <span class="pl-c1">false</span><span class="pl-kos">,</span>
                <span class="pl-c1">commons</span>: <span class="pl-kos">{</span>
                    <span class="pl-c1">test</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-c1">name</span>: <span class="pl-s">"vendor"</span><span class="pl-kos">,</span>
                    <span class="pl-c1">chunks</span>: <span class="pl-s">"initial"</span><span class="pl-kos">,</span>
                    <span class="pl-c1">minSize</span>: <span class="pl-c1">1</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>
<h3 dir="auto">Webpack 4 Result</h3>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/1702638/36878612-b34a8f90-1db7-11e8-8267-4de7ac8b68bd.png"><img src="https://user-images.githubusercontent.com/1702638/36878612-b34a8f90-1db7-11e8-8267-4de7ac8b68bd.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/1702638/36878462-054e3de2-1db7-11e8-904b-257e69c57938.png"><img src="https://user-images.githubusercontent.com/1702638/36878462-054e3de2-1db7-11e8-904b-257e69c57938.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">As you can see, <code class="notranslate">main run</code> fires before vendor, even though the runtime has been put inside vendor and it's loaded first.</p>
<h2 dir="auto">Webpack 3 Result</h2>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/1702638/36878543-6657b262-1db7-11e8-951c-55b2b735172a.png"><img src="https://user-images.githubusercontent.com/1702638/36878543-6657b262-1db7-11e8-951c-55b2b735172a.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">As you can see <code class="notranslate">vendor run</code> fires first, which means plugin is successfully registered and the alert dialog pops up.</p>
<p dir="auto">~~</p>
<p dir="auto">Original issue below - fixed by providing custom <code class="notranslate">splitChunks</code>. Above is now the current issue.</p>
<p dir="auto">~~<br>
<strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong></p>
<p dir="auto">Bug</p>
<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">Webpack 4 will add jQuery to both <code class="notranslate">vendor.js</code> and <code class="notranslate">main.js</code> when you use <code class="notranslate">ProvidePlugin</code> - this has a side effect that if you have a vendor plugin that is registering itself as a jQuery plugin in <code class="notranslate">vendor.js</code> thru <code class="notranslate">$.fn</code> it is only available for use in <code class="notranslate">vendor.js</code> and won't work in <code class="notranslate">main.js</code></p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong></p>
<h3 dir="auto">vendor.js</h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="$.fn.sayHi = function() {
    alert('Hi');
};"><pre class="notranslate"><span class="pl-s1">$</span><span class="pl-kos">.</span><span class="pl-c1">fn</span><span class="pl-kos">.</span><span class="pl-en">sayHi</span> <span class="pl-c1">=</span> <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-en">alert</span><span class="pl-kos">(</span><span class="pl-s">'Hi'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div>
<h3 dir="auto">main.js</h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import $ from 'jquery';

$.fn.sayHi();"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-s1">$</span> <span class="pl-k">from</span> <span class="pl-s">'jquery'</span><span class="pl-kos">;</span>

<span class="pl-s1">$</span><span class="pl-kos">.</span><span class="pl-c1">fn</span><span class="pl-kos">.</span><span class="pl-en">sayHi</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<h3 dir="auto">Webpack 3 config</h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var webpack = require('webpack');
var path = require('path');

module.exports = {

    entry: {
        main: './main.js',
        vendor: './vendor.js'
    },

    output: {
        path: path.resolve(__dirname, './dist'),
        filename: '[name].js',
    },

    plugins: [
        new webpack.ProvidePlugin({
           $: 'jquery',
           jQuery: 'jquery',
           'window.jQuery': 'jquery',
       }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor'
        })
    ]

};"><pre class="notranslate"><span class="pl-k">var</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-k">var</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-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">main</span>: <span class="pl-s">'./main.js'</span><span class="pl-kos">,</span>
        <span class="pl-c1">vendor</span>: <span class="pl-s">'./vendor.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">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">filename</span>: <span class="pl-s">'[name].js'</span><span class="pl-kos">,</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">ProvidePlugin</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
           <span class="pl-c1">$</span>: <span class="pl-s">'jquery'</span><span class="pl-kos">,</span>
           <span class="pl-c1">jQuery</span>: <span class="pl-s">'jquery'</span><span class="pl-kos">,</span>
           <span class="pl-s">'window.jQuery'</span>: <span class="pl-s">'jquery'</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-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">'vendor'</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 webpack 4 config is exactly the same, except minus the <code class="notranslate">CommonChunkPlugin</code></p>
<p dir="auto">This is the output:</p>
<h2 dir="auto">Webpack 3 with ProvidePlugin</h2>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/1702638/36815281-2072d884-1cd2-11e8-94cc-31f437f98cbb.png"><img src="https://user-images.githubusercontent.com/1702638/36815281-2072d884-1cd2-11e8-94cc-31f437f98cbb.png" alt="w3 with provideplugin" style="max-width: 100%;"></a></p>
<h2 dir="auto">Webpack 4 with ProvidePlugin</h2>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/1702638/36815290-2918c868-1cd2-11e8-92f3-ddc41ea6a99b.png"><img src="https://user-images.githubusercontent.com/1702638/36815290-2918c868-1cd2-11e8-92f3-ddc41ea6a99b.png" alt="w4 with provideplugin" style="max-width: 100%;"></a></p>
<p dir="auto">As you can see, Webpack 4 has added <code class="notranslate">jQuery</code> to both entries, though Webpack 3 hasn't.</p>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">To only include one version of jQuery.</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">This is likely down to the new "rules" surrounding when to chunk and it also not playing nicely with the ProvidePlugin. This is something that will likely catch a lot of people out, if they use the default chunking algorithm in Webpack 4 along with ProvidePlugin. Maybe there is a way to default to the old behaviour as Webpack 3, but it's not immediately obvious to me how to do this.</p>
<h3 dir="auto">Example Repository</h3>
<p dir="auto"><a href="https://github.com/garygreen/webpack4-chunks-prob">https://github.com/garygreen/webpack4-chunks-prob</a><br>
~~</p>