<p dir="auto">Sorry, long post :)</p>
<p dir="auto">I know this project is <strong>web</strong>pack, though it seems to have quite a lot of features (well done by the way). I've started writing a node packer (and I came up with a similar <a href="https://github.com/jpillora/node-bale/blob/master/templates/main.js">bootstrapper</a> to yours). I had the grand goal of packing (in a similar flat file as yours) an entire application, with all of its dependencies. After a couple days working on it, it seems like there are many difficult corner cases. Such as:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="var app = express()
app.use(express.static(__dirname + '/../static')); //lack of path.join"><pre class="notranslate"><code class="notranslate">var app = express()
app.use(express.static(__dirname + '/../static')); //lack of path.join
</code></pre></div>
<p dir="auto">At compile time, you could calculate which directory <code class="notranslate">static</code> is, though you wouldn't know what <code class="notranslate">express</code>, for example, is doing with it. My solution was to force each module to specify it's static files using a glob like: <code class="notranslate">./static/**</code>. Then there's the problem of where to copy all these static files. They can't go next the <code class="notranslate">bundle.js</code>, with 40+ modules, there would be a clash. So then you need to namespace static files, and rewrite all file references. I think the optimal solution for the filesystem stuff is to dynamically rewrite the <code class="notranslate">fs</code> module to modify filepaths before passing them to the real <code class="notranslate">fs</code> methods.</p>
<p dir="auto">After running into many problems, introducing exceptions for each disallowed case, dynamic requires, etc. Forcing a manifest.</p>
<p dir="auto">I'm modified my packer to now just do a directory copy, with the ability to rewrite the source. like change <code class="notranslate">my-secret-module.js</code> to <code class="notranslate">x.js</code> and all requires to <code class="notranslate">x</code> too. While minifying ofcourse. I plan to do like a "progressive enhancement" of packing. So start a normal directory copy, though <strong>when possible</strong>, compress filenames, flatten modules, etc. Optimally, I'd like no manifest file, and if you write your JS in an analysable way, the packer will pack tighter, if not it'll still work.</p>
<p dir="auto">Just wondering on your thoughts about Node.js, I know it's not your target, though many companies would be interested in getting it right, since it would allow for <em>safer</em> (even though it's not perfect) distribution.</p>
<p dir="auto">I originally came up with the same module number indexing scheme. Though I moved to full-path hashing + hash compression. So, <code class="notranslate">my/path/to/file.js</code> might hash to <code class="notranslate">aef83c1........</code>, and another might hash to <code class="notranslate">a2d553.....</code>. After all hashes have been calculated. You can compress them all. The above two would compress to <code class="notranslate">ae</code> and <code class="notranslate">a2</code>. With hashing, it allows you to convert <code class="notranslate">require(myvar)</code> into <code class="notranslate">require(__hash(myvar))</code>. Though there are still a few issues, like calculating the fullpath from a module requires you to store the path along side the module. However, I think this could be solved with some more cryptomagic. If you're happy with indices, instead of using an object <code class="notranslate">{0:a 1:b 2:c }</code>, you can equivalently use array <code class="notranslate">[ a, b, c]</code> - save a few bytes.</p>
<h2 dir="auto">Feature request</h2>
<p dir="auto">Here is the bug-ish issue I'm running into:</p>
<p dir="auto"><a href="https://github.com/jedwards1211/webpack-code-splitting-issue/tree/two-async-chunks">https://github.com/jedwards1211/webpack-code-splitting-issue/tree/two-async-chunks</a></p>





<h3 dir="auto"><code class="notranslate">index.js</code></h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import('./chunk1.js')
import('./chunk2.js')"><pre class="notranslate"><span class="pl-k">import</span><span class="pl-kos">(</span><span class="pl-s">'./chunk1.js'</span><span class="pl-kos">)</span>
<span class="pl-k">import</span><span class="pl-kos">(</span><span class="pl-s">'./chunk2.js'</span><span class="pl-kos">)</span></pre></div>
<h3 dir="auto"><code class="notranslate">chunk1.js</code></h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { Toggle } from 'react-powerplug';
console.log(Toggle)"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-v">Toggle</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'react-powerplug'</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-v">Toggle</span><span class="pl-kos">)</span></pre></div>
<h3 dir="auto"><code class="notranslate">chunk2.js</code></h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { Value } from 'react-powerplug';
console.log(Value)"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-v">Value</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'react-powerplug'</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-v">Value</span><span class="pl-kos">)</span></pre></div>
<h3 dir="auto"><code class="notranslate">webpack.config.js</code></h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// webpack.config.js
module.exports = {
  mode: 'production',
  externals: {
    'react': 'React'
  },
}"><pre class="notranslate"><span class="pl-c">// webpack.config.js</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">externals</span>: <span class="pl-kos">{</span>
    <span class="pl-s">'react'</span>: <span class="pl-s">'React'</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">webpack it on the command line</p>
<p dir="auto"><strong>What is the expected behavior?</strong><br>
<code class="notranslate">dist/1.js</code> contains <code class="notranslate">Toggle</code> but not <code class="notranslate">Value</code>.<br>
<code class="notranslate">dist/2.js</code> contains <code class="notranslate">Value</code> but not <code class="notranslate">Toggle</code>.</p>
<p dir="auto"><strong>Current behavior</strong><br>
<code class="notranslate">dist/1.js</code> contains both <code class="notranslate">Toggle</code> and <code class="notranslate">Value</code>.<br>
<code class="notranslate">dist/2.js</code> contains both <code class="notranslate">Toggle</code> and <code class="notranslate">Value</code>.</p>
<p dir="auto">It seems that the tree shaking is applied to <code class="notranslate">react-powerplug</code> main module itself, irrespective of the individual chunks that are importing from it.</p>
<p dir="auto"><strong>What is motivation or use case for adding/changing the behavior?</strong><br>
Many packages nowadays use rollup to bundle their code into a single JS module and distribute that one file (or maybe one bundle for ES5, one bundle for ES2015).  As such, I want to be confident that Webpack will eliminate dead code effectively when several different chunks of my app are importing from a rollup bundle.</p>
<p dir="auto"><strong>How should this be implemented in your opinion?</strong><br>
Hopefully, tree-shaking can be performed on <code class="notranslate">react-powerplug</code> for the import in <code class="notranslate">chunk1.js</code>, and then a second, different round of tree-shaking can be performed for the import in <code class="notranslate">chunk2.js</code>.  Right now it seems like Webpack is only performing one tree-shaking operation on <code class="notranslate">react-powerplug</code> based upon all imports from it from all chunks in my app.</p>
<p dir="auto"><strong>Are you willing to work on this yourself?</strong><br>
I would need a lot of guidance, as this seems like this might require a significant refactor</p>