<p dir="auto">I was wondering if something like the following is possible.</p>
<p dir="auto">Given the data structure:</p>
<ul dir="auto">
<li>docs
<ul dir="auto">
<li>doc1.json</li>
<li>doc2.json</li>
</ul>
</li>
</ul>
<p dir="auto">And the following code:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="function loadDoc(name, cb) {
    require.ensure([], function (require) {
        cb(require(&quot;./docs/&quot; + name));
    });
} "><pre class="notranslate"><span class="pl-k">function</span> <span class="pl-en">loadDoc</span><span class="pl-kos">(</span><span class="pl-s1">name</span><span class="pl-kos">,</span> <span class="pl-s1">cb</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-en">require</span><span class="pl-kos">.</span><span class="pl-en">ensure</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">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-s1">cb</span><span class="pl-kos">(</span><span class="pl-s1">require</span><span class="pl-kos">(</span><span class="pl-s">"./docs/"</span> <span class="pl-c1">+</span> <span class="pl-s1">name</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>
<span class="pl-kos">}</span> </pre></div>
<p dir="auto">If I understand the current behaviour would be that doc1.json and doc2.json both end up in one chunk together (one external JS file that will be loaded dynamic). But is there any way to change the code so that doc1.json and doc2.json get there individual bundle without having to hardcode for each file a require.ensure?</p>
<p dir="auto"><strong>What is the current behavior?</strong><br>
When I use anything else besides an external source map file option as a value in the dev option (for example "source-map"),  <a href="https://webpack.js.org/configuration/devtool/#development" rel="nofollow">https://webpack.js.org/configuration/devtool/#development</a> , when I modify a CSS property in my Chrome dev tools inspector, something weird happens: Chrome seems to add dynamically many copies of my rule/file which I modified (and naturally a broken layout.)<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/1768834/39618318-7b35acd6-4f83-11e8-8808-37ff442dd0d4.gif"><img src="https://user-images.githubusercontent.com/1768834/39618318-7b35acd6-4f83-11e8-8808-37ff442dd0d4.gif" alt="39046259-db556168-4495-11e8-99d9-b366b8cb976f" data-animated-image="" style="max-width: 100%;"></a></p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong></p>
<ul dir="auto">
<li>use webpack-dev-server</li>
<li>use cheap-module-eval-source-map</li>
<li>modify CSS properties from devtools (see gif above)</li>
</ul>
<p dir="auto"><strong>What is the expected behavior?</strong><br>
Layout should just update the properties modified.</p>
<p dir="auto"><strong>Other relevant information:</strong><br>
webpack version:  2.x + 4.x<br>
Node.js version:  8.x , 9.x<br>
Operating System:  macOS Sierra 10.12.6 (16G1212)<br>
Additional tools: Chrome Version 66.0.3359.139 (Official Build) (64-bit)</p>