<p dir="auto">The css- and html-loader are currently creating a string like this:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&quot;module.exports = '&lt;html&gt;&lt;body&gt;&lt;img src=\&quot;' + require(\&quot;./some/img.jpg\&quot;) + '\&quot;&gt;&lt;/body&gt;&lt;/html&gt;&quot;;"><pre class="notranslate"><span class="pl-s">"module.exports = '&lt;html&gt;&lt;body&gt;&lt;img src=\"' + require(\"./some/img.jpg\") + '\"&gt;&lt;/body&gt;&lt;/html&gt;"</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">I think this behavior violates the rule that a loader should do only one thing because it turns an html-string into a javascript-module. That's exactly what the raw-loader does.</p>
<p dir="auto">Wouldn't it be better if the html- and css-loader just replaced all referenced urls (without wrapping them in a <code class="notranslate">require()</code> statement) and then pass the string to the next loader?</p>
<p dir="auto">webpack could then also be used as a bundler for static webpages that don't want to render themselves via JavaScript.</p>
<p dir="auto">Is it possible to just generate a CSS file from web pack? I'd love to have styles in the head and then a framework script and app script in the footer. Is this possible?</p>