<p dir="auto">Let's say we have two pages: PageA, PageB, and they have pageA.js and pageB.js. Both of them depdends on a common bunch of stuffs, which can be packed into a file called "common.js".<br>
pageA.js:<br>
<code class="notranslate">require(['common', 'someOtherThingsANeeds'], function(){//do sth.})</code><br>
pageB.js:<br>
<code class="notranslate">require(['common', 'someOtherThingsBNeeds'], function(){//do sth.})</code></p>
<p dir="auto">I want to load chunks when the page runs, so I use a config like this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="    new CommonsChunkPlugin({
      name: &quot;pageA&quot;,
      async: true,
    }),
    new CommonsChunkPlugin({
      name: &quot;pageB&quot;,
      async: true,
    })"><pre class="notranslate"><code class="notranslate">    new CommonsChunkPlugin({
      name: "pageA",
      async: true,
    }),
    new CommonsChunkPlugin({
      name: "pageB",
      async: true,
    })
</code></pre></div>
<p dir="auto">But it comes out that both chunks of pageA and pageB have the same content of module "common", which are duplicated and should be extracted to a single module called "common"</p>
<p dir="auto">In <a href="https://github.com/webpack/webpack/tree/master/examples/multiple-commons-chunks">this</a> example, we can just specify something like this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="        new CommonsChunkPlugin({
            name: &quot;commons.js&quot;,
            chunks: [&quot;pageA&quot;, &quot;pageB&quot;, &quot;admin-commons.js&quot;],
            minChunks: 2
        }),"><pre class="notranslate"><code class="notranslate">        new CommonsChunkPlugin({
            name: "commons.js",
            chunks: ["pageA", "pageB", "admin-commons.js"],
            minChunks: 2
        }),
</code></pre></div>
<p dir="auto">However, I have to declare the reference of "common.js" in the html file. In addition, I can't control when my "common.js" should be loaded by js. And I can't control my dependencies in my js only. I have to remember to write it and I have to ordering the declarations in an old way.</p>
<p dir="auto">In r.js of require.js, there's such a config that we can customize which of the modules should be seperated into individual ones, like this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="modules:[ { name:&quot;common&quot;,
      include:[ &quot;allThingsCommonNeeds&quot; ] }, 
{ name:&quot;pageA&quot;,
      include:[ &quot;blabla ],
    exclude:[&quot;common&quot;] }]"><pre class="notranslate"><code class="notranslate">modules:[ { name:"common",
      include:[ "allThingsCommonNeeds" ] }, 
{ name:"pageA",
      include:[ "blabla ],
    exclude:["common"] }]
</code></pre></div>
<p dir="auto">So how could I achieve this by webpack? Do you guys have any suggestions or ideas? Thank you very much.</p>
<h1 dir="auto">Bug report</h1>




<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">Webpack 5 persistent cache + EnvironmentPlugin: environment variables changing doesn't affect cache.</p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong></p>
<ul dir="auto">
<li>make webpack config with persistent cache and EnvironmentPlugin</li>
<li>build code, for example, with env variable <code class="notranslate">TEST_VAR=1</code>, output code will contain value <code class="notranslate">1</code></li>
<li>next build with <code class="notranslate">TEST_VAR=2</code>, output code will still contain value <code class="notranslate">1</code></li>
</ul>






<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">Environment variable change will affect output code.</p>


<p dir="auto"><strong>Other relevant information:</strong><br>
webpack version:  5<br>
Node.js version: 12<br>
Operating System:  macOS</p>