<h1 dir="auto">Bug report</h1>




<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">After packaging the file, the global variable name is repeated, resulting in the variable is overwritten, call the wrong method, resulting in an error.</p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong><br>
Execute the command “cross-env BUILD_ENV=dev umi build“</p>






<p dir="auto"><strong>What is the expected behavior?</strong><br>
Global variable definitions do not affect each other</p>


<p dir="auto"><strong>Other relevant information:</strong><br>
webpack version:  5.6.0<br>
Node.js version: 16.14.2<br>
Operating System: win 10<br>
Additional tools:</p>
<p dir="auto"><strong>Related images</strong><br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/44466363/198245311-6ec05b4c-9dfe-4f1f-ae65-1345c48df61d.png"><img src="https://user-images.githubusercontent.com/44466363/198245311-6ec05b4c-9dfe-4f1f-ae65-1345c48df61d.png" alt="50718c6bf5d2faddaf77787838183d4" style="max-width: 100%;"></a><br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/44466363/198245347-d90a7f59-184a-47d8-9752-835f8bf88309.png"><img src="https://user-images.githubusercontent.com/44466363/198245347-d90a7f59-184a-47d8-9752-835f8bf88309.png" alt="916ebba92289fd14e9ea470e31587c7" style="max-width: 100%;"></a></p>
<h2 dir="auto">Feature request</h2>
<p dir="auto">Webpack currently uses (only?) JS files as main entry-points via the <code class="notranslate">entry</code> property in configuration options, and then resolves dependencies from there. I request to support HTML files as entry points and resolve dependencies from there.</p>
<h3 dir="auto">What is the expected behavior?</h3>
<p dir="auto">Currently webpack throws an error saying there is no loader associated to handle the file type.</p>
<h3 dir="auto">What is motivation or use case for adding/changing the behavior?</h3>
<p dir="auto">Whenever a user (browser/UA) loads a page, the first thing it gets is an HTML response. The UA then resolves other resource files (CSS, JS, images, ...) from the HTML content and loads them as required. So it is intuitive for webpack to start from an HTML file and resolve dependencies from there. Parcel already does this, but <a href="https://x-team.com/blog/rollup-webpack-parcel-comparison/" rel="nofollow">comparing webpack with other module bundlers</a>, webpack is still the fastest.</p>
<p dir="auto">I know that I can write some code like <code class="notranslate">require('./component.html')</code> and use something like <code class="notranslate">html-webpack-plugin</code> to also get the HTML files and process them. But this feels very disconnected from requiring all the files in JS code, and only handling HTML code through a separate plugin (yes, there may be a way to do this, but I'm sure its just another hack/plugin/loader).</p>
<p dir="auto">Module bundlers started with JS entry points when they only handled JS, but <strong>webpack evolved to be more than just a module bundler for JS</strong>, which is now used to load all kinds of files. <strong>A JS file is a dependency to an HTML file, not the other way around</strong>.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="                 html &lt;-- start from here
        ┌──────────┼─────────┐
       css        img        js &lt;-- not from here
   ┌────┴────┐          ┌────┼────┐
  css       css         js   js  js"><pre class="notranslate"><code class="notranslate">                 html &lt;-- start from here
        ┌──────────┼─────────┐
       css        img        js &lt;-- not from here
   ┌────┴────┐          ┌────┼────┐
  css       css         js   js  js
</code></pre></div>
<p dir="auto">Because c'mon man, how standard (isomorphic?) is writing something like <code class="notranslate">import styles from './styles.css';</code>? <strong>Why couldn't webpack think (and also act) as a browser instead!?</strong></p>
<p dir="auto">Some people (who write HTML inside JS) may not like this feature, but I want to make it clear that I want webpack to support HTML entry-points along side JS entry-points, not replace the existing behavior.</p>
<h3 dir="auto">How should this be implemented in your opinion?</h3>
<p dir="auto">Let HTML files be included in the <code class="notranslate">entry</code> option and webpack should handle it by default (without any need of plugins), then provide loaders for different file types.</p>
<p dir="auto"><em><strong>Sidenote:</strong> I think one advantage of this approach may be for people to move their existing static/dynamic applications move to wepack without (re-)writing CSS and HTML imports in JS files. They can just include webpack and point it to some HTML files.</em></p>
<h3 dir="auto">Are you willing to work on this yourself?</h3>
<p dir="auto">I'm a regular webpack user, but haven't looked into the source code yet. If someone can guide me on the internals, then yes!</p>