<p dir="auto">Currently, the DllPlugin and DllReferencePlugin allows loading external modules from separately generated bundles. The problem is that we need to provide a manifest with all the modules being bundled <strong>at the time of bundling</strong>. This is limiting in certain scenarios, where we would like to dynamically load modules which are not known at the time of build (user input, external files).</p>
<p dir="auto">Example use case:</p>
<p dir="auto">Imagine an docs-browser app, that dynamically loads the documentation text and executable examples, based on a JSON file that lists where they are contained. The documentation and examples are stored and built separately. They both can grow (more files are added) and we shouldn't need to republish the entire documentation website after every new addition to the documentation.</p>
<p dir="auto">What I propose is that we delegate the manifest to the Dll bundle itself. This way the following could be possible:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="require('https://domain.com/dll-bundle.js#jquery');"><pre class="notranslate"><span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'https://domain.com/dll-bundle.js#jquery'</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">Assuming the <code class="notranslate">dll-bundle.js</code> file is a bundle that contains the module <code class="notranslate">jquery</code>, the above require would download the file (proper CORS required), load the manifest from it (listing all the mappings of modules and merging them with the preloaded ones) and finally load the code from the bundled module <code class="notranslate">jquery</code>.</p>
<p dir="auto">This would require the module IDs to be long and random (e.g. UUIDs) so that collisions do not occur, but they could technically also be generated based on prefixed some seeded value.</p>
<p dir="auto">This would solve questions like <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="105078340" data-permission-text="Title is private" data-url="https://github.com/webpack/webpack/issues/1421" data-hovercard-type="issue" data-hovercard-url="/webpack/webpack/issues/1421/hovercard" href="https://github.com/webpack/webpack/issues/1421">#1421</a> or <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="25915720" data-permission-text="Title is private" data-url="https://github.com/webpack/webpack/issues/150" data-hovercard-type="issue" data-hovercard-url="/webpack/webpack/issues/150/hovercard" href="https://github.com/webpack/webpack/issues/150">#150</a>.</p>
<p dir="auto">EDIT:<br>
A helper method for requiring from an external bundle might make more sense, something like:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="require.ensureExternal('https://domain.com/dll-bundle.js', function(require) {
  var $ = require('jquery');
})

// or even:
require.ensureExternal(dynamicallyGeneratedUrl, function(require) {
  var someModule = require(totallyDynamicName);
})"><pre class="notranslate"><span class="pl-en">require</span><span class="pl-kos">.</span><span class="pl-en">ensureExternal</span><span class="pl-kos">(</span><span class="pl-s">'https://domain.com/dll-bundle.js'</span><span class="pl-kos">,</span> <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">require</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">var</span> <span class="pl-s1">$</span> <span class="pl-c1">=</span> <span class="pl-s1">require</span><span class="pl-kos">(</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-c">// or even:</span>
<span class="pl-en">require</span><span class="pl-kos">.</span><span class="pl-en">ensureExternal</span><span class="pl-kos">(</span><span class="pl-s1">dynamicallyGeneratedUrl</span><span class="pl-kos">,</span> <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">require</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">var</span> <span class="pl-s1">someModule</span> <span class="pl-c1">=</span> <span class="pl-s1">require</span><span class="pl-kos">(</span><span class="pl-s1">totallyDynamicName</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span></pre></div>
<h1 dir="auto">Bug report</h1>




<p dir="auto"><strong>What is the current behavior?</strong><br>
Progress message showing weird: percent building modules message show many space. maybe issue due to nextMessage lineCaretPosition computed incorrect.</p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong><br>
Env: win10+vscode + vue-cli (with latest version of webpack )<br>
1: vue create myapp<br>
2. npm install<br>
3. npm run serve</p>






<p dir="auto"><strong>What is the expected behavior?</strong><br>
Progress message should output with correctly line cart start postion.</p>


<p dir="auto"><strong>Other relevant information:</strong><br>
webpack version:  4.17.1<br>
Node.js version:  8.11.3<br>
Operating System: Windows 10<br>
Additional tools: vscode + vue-cli 3.0.1</p>