<p dir="auto">I have 3 application bundles (3 entrypoints) and also a bunch of vendor files. I'd like to create a bundle that has all the common code from the 3 entrypoints as well as the bundle of vendor files (or put the common code also in the vendor bundle).</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="plugins = [
    new webpack.optimize.CommonsChunkPlugin(&quot;vendor&quot;, &quot;vendor.bundle.js&quot;),
    new webpack.NormalModuleReplacementPlugin(appModuleRegex, function(result) {
        result.request = result.request.replace(appModuleRegex, &quot;/web/app/$1/src/$2&quot;);
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.optimize.LimitChunkCountPlugin({maxChunks: 1}),
    new webpack.optimize.OccurenceOrderPlugin(true)
];"><pre class="notranslate"><code class="notranslate">plugins = [
    new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.bundle.js"),
    new webpack.NormalModuleReplacementPlugin(appModuleRegex, function(result) {
        result.request = result.request.replace(appModuleRegex, "/web/app/$1/src/$2");
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.optimize.LimitChunkCountPlugin({maxChunks: 1}),
    new webpack.optimize.OccurenceOrderPlugin(true)
];
</code></pre></div>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="entrypoints = {
    framework: 'framework/app',
    operations: 'operations/app',
    platform: 'platform/app',
    vendor: 
        ['babel-core',
         'crypto-js',
         'classnames',
         'd3',
         'fetch',
         'lodash',
         'moment',
         'moment-timezone',
         'react',
         'react-router',
         'react-select',
         'zxcvbn2']
};"><pre class="notranslate"><code class="notranslate">entrypoints = {
    framework: 'framework/app',
    operations: 'operations/app',
    platform: 'platform/app',
    vendor: 
        ['babel-core',
         'crypto-js',
         'classnames',
         'd3',
         'fetch',
         'lodash',
         'moment',
         'moment-timezone',
         'react',
         'react-router',
         'react-select',
         'zxcvbn2']
};
</code></pre></div>
<p dir="auto">Currently I'm seeing a lot of code duplicated across the app bundles. I also need to keep maxChunks at 1.</p>
<h1 dir="auto">Bug report</h1>
<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">When using externals while building an UMD library, each external generate a wrapper module using CommonJS, which bails out from optimization.</p>
<p dir="auto">The output file looks like this:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="(function webpackUniversalModuleDefinition(root, factory) {
// REDACTED
})(this, function(__WEBPACK_EXTERNAL_MODULE__0__, __WEBPACK_EXTERNAL_MODULE__1__) {
return /******/ (function(modules) { // webpackBootstrap
// REDACTED
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports) {

module.exports = __WEBPACK_EXTERNAL_MODULE__0__;

/***/ }),
/* 1 */
/***/ (function(module, exports) {

module.exports = __WEBPACK_EXTERNAL_MODULE__1__;

/***/ }),
/***/ (function(module, __webpack_exports__, __webpack_require__) {
// REDACTED (code of the library, all concatenated together)
/***/ })
/******/ ]);
});"><pre class="notranslate"><span class="pl-kos">(</span><span class="pl-k">function</span> <span class="pl-en">webpackUniversalModuleDefinition</span><span class="pl-kos">(</span><span class="pl-s1">root</span><span class="pl-kos">,</span> <span class="pl-s1">factory</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
<span class="pl-c">// REDACTED</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">,</span> <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-c1">__WEBPACK_EXTERNAL_MODULE__0__</span><span class="pl-kos">,</span> <span class="pl-c1">__WEBPACK_EXTERNAL_MODULE__1__</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
<span class="pl-k">return</span> <span class="pl-c">/******/</span> <span class="pl-kos">(</span><span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">modules</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-c">// webpackBootstrap</span>
<span class="pl-c">// REDACTED</span>
<span class="pl-c">/******/</span> <span class="pl-kos">}</span><span class="pl-kos">)</span>
<span class="pl-c">/************************************************************************/</span>
<span class="pl-c">/******/</span> <span class="pl-kos">(</span><span class="pl-kos">[</span>
<span class="pl-c">/* 0 */</span>
<span class="pl-c">/***/</span> <span class="pl-kos">(</span><span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">module</span><span class="pl-kos">,</span> <span class="pl-s1">exports</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>

<span class="pl-s1">module</span><span class="pl-kos">.</span><span class="pl-c1">exports</span> <span class="pl-c1">=</span> <span class="pl-c1">__WEBPACK_EXTERNAL_MODULE__0__</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-c">/* 1 */</span>
<span class="pl-c">/***/</span> <span class="pl-kos">(</span><span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">module</span><span class="pl-kos">,</span> <span class="pl-s1">exports</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>

<span class="pl-s1">module</span><span class="pl-kos">.</span><span class="pl-c1">exports</span> <span class="pl-c1">=</span> <span class="pl-c1">__WEBPACK_EXTERNAL_MODULE__1__</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-c">/***/</span> <span class="pl-kos">(</span><span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">module</span><span class="pl-kos">,</span> <span class="pl-s1">__webpack_exports__</span><span class="pl-kos">,</span> <span class="pl-s1">__webpack_require__</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
<span class="pl-c">// REDACTED (code of the library, all concatenated together)</span>
<span class="pl-c">/***/</span> <span class="pl-kos">}</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-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">Given that the generated external modules are simply re-exporting the <code class="notranslate">__WEBPACK_EXTERNAL_MODULE__*__</code> variables (which are defined based on UMD dependencies in the external wrapper), I see no benefit for them over referencing this variable directly.<br>
Maybe the ExternalModule could be generated as an ES module for that case instead (exporting the <code class="notranslate">__WEBPACK_EXTERNAL_MODULE__0__</code> variable as its export) and letting the concatenation plugin optimize it, in case this is simpler to handle than removing the wrapper.</p>
<p dir="auto">Note that I'm mostly interested in cases where the library source code is written entirely in ES modules, and the output uses UMD (until we get support for the ESM output in the future)</p>
<p dir="auto"><strong>Other relevant information:</strong><br>
webpack version:  4.41.2<br>
Node.js version: 12.13.0<br>
Operating System: Ubuntu 18.04<br>
Additional tools:</p>