<h2 dir="auto">Feature request</h2>
<p dir="auto">When outputting content targeting the <code class="notranslate">web</code> platform, it would be nice to have the option to output an es module for modern browsers. (I don't believe there is currently a way to do this - if there is it needs better documentation :P).</p>
<p dir="auto"><strong>What is the expected behavior?</strong><br>
Ideally, I would like to be able to have webpack output two entry files, an esmodule as well as what it currently outputs.<br>
Then in the <code class="notranslate">index.html</code> file, both files can be loaded like this:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;head&gt;
  &lt;script nomodule src=&quot;bundle.js&quot; async&gt;&lt;/script&gt;
  &lt;script type=&quot;module&quot; src=&quot;bundle.mjs&quot; async&gt;&lt;/script&gt;
&lt;/head&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">head</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">script</span> <span class="pl-c1">nomodule</span> <span class="pl-c1">src</span>="<span class="pl-s">bundle.js</span>" <span class="pl-c1">async</span><span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">script</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">script</span> <span class="pl-c1">type</span>="<span class="pl-s">module</span>" <span class="pl-c1">src</span>="<span class="pl-s">bundle.mjs</span>" <span class="pl-c1">async</span><span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">script</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">head</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto"><strong>What is motivation or use case for adding/changing the behavior?</strong><br>
Supporting the modern web.</p>
<p dir="auto"><strong>How should this be implemented in your opinion?</strong><br>
Maybe something like this:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// webpack.config.js

const config = {
  //...
};

const webConfig = Object.assign({}, config, {
  target: 'web',
  //...
});

const webModuleConfig = Object.assign({}, config, {
  target: 'web-module',
  //...
});

module.exports = [
  webConfig, webModuleConfig,       
];"><pre class="notranslate"><span class="pl-c">// webpack.config.js</span>

<span class="pl-k">const</span> <span class="pl-s1">config</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
  <span class="pl-c">//...</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-s1">webConfig</span> <span class="pl-c1">=</span> <span class="pl-v">Object</span><span class="pl-kos">.</span><span class="pl-en">assign</span><span class="pl-kos">(</span><span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-s1">config</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
  <span class="pl-c1">target</span>: <span class="pl-s">'web'</span><span class="pl-kos">,</span>
  <span class="pl-c">//...</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-s1">webModuleConfig</span> <span class="pl-c1">=</span> <span class="pl-v">Object</span><span class="pl-kos">.</span><span class="pl-en">assign</span><span class="pl-kos">(</span><span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-s1">config</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
  <span class="pl-c1">target</span>: <span class="pl-s">'web-module'</span><span class="pl-kos">,</span>
  <span class="pl-c">//...</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</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-s1">webConfig</span><span class="pl-kos">,</span> <span class="pl-s1">webModuleConfig</span><span class="pl-kos">,</span>       
<span class="pl-kos">]</span><span class="pl-kos">;</span></pre></div>
<p dir="auto"><strong>Are you willing to work on this yourself?</strong><br>
Maybe but probably not. I'm still a novice when it comes to the webpack eco-system so I'd probably be at a loss on how to implement this.</p>
<p dir="auto"><strong>I'm submitting a feature request</strong></p>
<p dir="auto">It would be nice, if <a href="https://github.com/webpack/docs/wiki/Configuration#outputlibrarytarget"><code class="notranslate">output.libraryTarget</code></a> could support the ES2015 module format.</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong></p>
<p dir="auto">Say I develop a fancy component called <code class="notranslate">fancy-component</code> with webpack. I use a very custom config with specific loader settings e.g. for inlining images and stuff like that. My module exports <code class="notranslate">FancyComponent</code> and <code class="notranslate">BigFancyComponent</code>.</p>
<p dir="auto">A friend develops a single page application and uses rollup to do that. He knows nothing about webpack, but wants to use my <code class="notranslate">FancyComponent</code>, but not <code class="notranslate">BigFancyComponent</code>. He installs <code class="notranslate">fancy-component</code> and imports <code class="notranslate">FancyComponent</code>. <code class="notranslate">BigFancyComponent</code> should not be included in the build (because of tree shaking).</p>
<p dir="auto"><em>As far as I know</em> this is currently not possible. My friend would need <code class="notranslate">fancy-component</code> in a format using ES2015 modules. But currently these include webpack specific loader logic. I really need to publish <code class="notranslate">fancy-component</code> <em>without</em> webpack specific logic, but with ES2015 modules.</p>