<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong></p>
<p dir="auto">Bug.</p>


<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">By way of example, I have:</p>
<ul dir="auto">
<li><code class="notranslate">util.js</code>: ES exports two methods: <code class="notranslate">red</code> and <code class="notranslate">blue</code> via two scenarios: <code class="notranslate">one-file</code> (all code within one file) and <code class="notranslate">re-export</code> (methods re-exported from external files)</li>
<li><code class="notranslate">app1.js</code>: Imports and uses only <code class="notranslate">red</code></li>
<li><code class="notranslate">app2.js</code>: Imports and uses only <code class="notranslate">blue</code></li>
</ul>
<p dir="auto"><em>Expected</em>: If I build webpack bundles for both apps, <code class="notranslate">app1</code> will have <code class="notranslate">red</code> and <code class="notranslate">blue</code> will be eliminated. Conversely, <code class="notranslate">app2</code> will have <code class="notranslate">blue</code> and <code class="notranslate">red</code> will be eliminated:</p>
<p dir="auto"><em>Actual</em>: Depends on config</p>
<ol dir="auto">
<li><em>Array of Configs</em>: If there is an array of configurations with a single entry point each for <code class="notranslate">app1.js</code> and <code class="notranslate">app2.js</code> the correct unused methods are dropped.</li>
<li><em>Multiple Entry Points</em>: If there is a single configuration object with multiple entry points for both <code class="notranslate">app1.js</code> and <code class="notranslate">app2.js</code>, then <strong>neither <code class="notranslate">blue</code> nor <code class="notranslate">red</code> are eliminated in either bundle</strong>. I would consider this a bug. Perhaps there is some known thing for "multiple entry points get any esnext exports used by <em>any</em> other entry point", but that seems weird.</li>
</ol>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong></p>



<p dir="auto">We made a repository with passing and failing mocha tests to show the situation: <a href="https://github.com/FormidableLabs/webpack-tree-shaking-multiple-entry-points">https://github.com/FormidableLabs/webpack-tree-shaking-multiple-entry-points</a>.</p>
<p dir="auto"><em>Reproduction</em>:</p>
<div class="highlight highlight-source-shell notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="$ git clone https://github.com/FormidableLabs/webpack-tree-shaking-multiple-entry-points.git
$ cd webpack-tree-shaking-multiple-entry-points
$ yarn install
$ yarn run build
$ yarn run test"><pre class="notranslate">$ git clone https://github.com/FormidableLabs/webpack-tree-shaking-multiple-entry-points.git
$ <span class="pl-c1">cd</span> webpack-tree-shaking-multiple-entry-points
$ yarn install
$ yarn run build
$ yarn run <span class="pl-c1">test</span></pre></div>
<p dir="auto">The test output is:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="  tree shaking in webpack4
    array
      one-file
        ✓ app1 should have red, not blue
        ✓ app2 should have blue, not red
      re-export
        ✓ app1 should have red, not blue
        ✓ app2 should have blue, not red
    multiple-entries
      one-file
        1) app1 should have red, not blue
        2) app2 should have blue, not red
      re-export
        3) app1 should have red, not blue
        4) app2 should have blue, not red


  4 passing (22ms)
  4 failing"><pre class="notranslate"><code class="notranslate">  tree shaking in webpack4
    array
      one-file
        ✓ app1 should have red, not blue
        ✓ app2 should have blue, not red
      re-export
        ✓ app1 should have red, not blue
        ✓ app2 should have blue, not red
    multiple-entries
      one-file
        1) app1 should have red, not blue
        2) app2 should have blue, not red
      re-export
        3) app1 should have red, not blue
        4) app2 should have blue, not red


  4 passing (22ms)
  4 failing
</code></pre></div>
<p dir="auto">The failing ones show that the ES methods that should be dropped aren't.</p>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">See above section on <code class="notranslate">current behavior</code>.</p>
<p dir="auto"><strong>If this is a feature request, what is motivation or use case for changing the behavior?</strong></p>
<p dir="auto">Nope, it's a bug.</p>
<p dir="auto"><strong>Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System.</strong></p>
<div class="highlight highlight-source-shell notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="$ node --version
v8.4.0

$  $ yarn list webpack
yarn list v1.3.2
└─ webpack@4.0.0-beta.1

$ uname -a
Darwin small.lan 16.7.0 Darwin Kernel Version 16.7.0: Thu Jan 11 22:59:40 PST 2018; root:xnu-3789.73.8~1/RELEASE_X86_64 x86_64"><pre class="notranslate">$ node --version
v8.4.0

$  $ yarn list webpack
yarn list v1.3.2
└─ webpack@4.0.0-beta.1

$ uname -a
Darwin small.lan 16.7.0 Darwin Kernel Version 16.7.0: Thu Jan 11 22:59:40 PST 2018<span class="pl-k">;</span> root:xnu-3789.73.8~1/RELEASE_X86_64 x86_64</pre></div>
<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong><br>
bug  webpack  3.8.1</p>
<p dir="auto">Tree shaking does not seem to work if an exported item is used in other chunks.</p>
<p dir="auto">From the below example both page1.js and page2.js will have <strong>ALL</strong> the exports from utils.js even though page1 for only imported {a , b} from  './utils' and page2 for only imported {c , d} from  './utils';</p>
<p dir="auto">I expected that each file will keep only the imports it needs and the reset will be minified away at production build.</p>
<p dir="auto">However if for example I remove the {c} import from page2.js only then will c be mark as unused in both page1.js and page2.js complied files</p>
<p dir="auto">e.g.</p>
<p dir="auto">As seen both page1 and page 2 have the code for import a,b,c,d after compilation.</p>
<p dir="auto"><strong>page1.js</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import {
    a,
    b
} from &quot;./utils&quot;;

console.log(a, b);"><pre class="notranslate"><code class="notranslate">import {
    a,
    b
} from "./utils";

console.log(a, b);
</code></pre></div>
<p dir="auto"><strong>page2.js</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import {
    c,
    d
} from &quot;./utils&quot;;

console.log(c, d);"><pre class="notranslate"><code class="notranslate">import {
    c,
    d
} from "./utils";

console.log(c, d);
</code></pre></div>
<p dir="auto"><strong>utils.js</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="export const a = 1;
export const b = 2;
export const c = 3;
export const d = 4;"><pre class="notranslate"><code class="notranslate">export const a = 1;
export const b = 2;
export const c = 3;
export const d = 4;
</code></pre></div>
<p dir="auto"><strong>After compilation</strong></p>
<p dir="auto"><strong>page1.js</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="(function(modules) { // webpackBootstrap
})
/************************************************************************/
([
/* 0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

&quot;use strict&quot;;
const a = 1;
/* harmony export (immutable) */ __webpack_exports__[&quot;a&quot;] = a;

const b = 2;
/* harmony export (immutable) */ __webpack_exports__[&quot;b&quot;] = b;

const c = 3;
/* harmony export (immutable) */ __webpack_exports__[&quot;c&quot;] = c;

const d = 4;
/* harmony export (immutable) */ __webpack_exports__[&quot;d&quot;] = d;


/***/ }),
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

&quot;use strict&quot;;
Object.defineProperty(__webpack_exports__, &quot;__esModule&quot;, { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils__ = __webpack_require__(0);


console.log(__WEBPACK_IMPORTED_MODULE_0__utils__[&quot;a&quot;], __WEBPACK_IMPORTED_MODULE_0__utils__[&quot;b&quot;]);

/***/ })
]);"><pre class="notranslate"><code class="notranslate">(function(modules) { // webpackBootstrap
})
/************************************************************************/
([
/* 0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
const a = 1;
/* harmony export (immutable) */ __webpack_exports__["a"] = a;

const b = 2;
/* harmony export (immutable) */ __webpack_exports__["b"] = b;

const c = 3;
/* harmony export (immutable) */ __webpack_exports__["c"] = c;

const d = 4;
/* harmony export (immutable) */ __webpack_exports__["d"] = d;


/***/ }),
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils__ = __webpack_require__(0);


console.log(__WEBPACK_IMPORTED_MODULE_0__utils__["a"], __WEBPACK_IMPORTED_MODULE_0__utils__["b"]);

/***/ })
]);
</code></pre></div>
<p dir="auto"><strong>page2.js</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content=" (function(modules) { // webpackBootstrap
 })
/************************************************************************/
 ([
/* 0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

&quot;use strict&quot;;
const a = 1;
/* harmony export (immutable) */ __webpack_exports__[&quot;a&quot;] = a;

const b = 2;
/* harmony export (immutable) */ __webpack_exports__[&quot;b&quot;] = b;

const c = 3;
/* harmony export (immutable) */ __webpack_exports__[&quot;c&quot;] = c;

const d = 4;
/* harmony export (immutable) */ __webpack_exports__[&quot;d&quot;] = d;


/***/ }),
/* 1 */,
/* 2 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

&quot;use strict&quot;;
Object.defineProperty(__webpack_exports__, &quot;__esModule&quot;, { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils__ = __webpack_require__(0);


console.log(__WEBPACK_IMPORTED_MODULE_0__utils__[&quot;c&quot;], __WEBPACK_IMPORTED_MODULE_0__utils__[&quot;d&quot;]);

/***/ })
 ]);"><pre class="notranslate"><code class="notranslate"> (function(modules) { // webpackBootstrap
 })
/************************************************************************/
 ([
/* 0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
const a = 1;
/* harmony export (immutable) */ __webpack_exports__["a"] = a;

const b = 2;
/* harmony export (immutable) */ __webpack_exports__["b"] = b;

const c = 3;
/* harmony export (immutable) */ __webpack_exports__["c"] = c;

const d = 4;
/* harmony export (immutable) */ __webpack_exports__["d"] = d;


/***/ }),
/* 1 */,
/* 2 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils__ = __webpack_require__(0);


console.log(__WEBPACK_IMPORTED_MODULE_0__utils__["c"], __WEBPACK_IMPORTED_MODULE_0__utils__["d"]);

/***/ })
 ]);
</code></pre></div>
<p dir="auto"><strong>webpack config</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="module.exports = {
    entry: {
        page1: './page1.js',
        page2: './page2.js'
    },
    output: {
        filename: '[name].dist.js'
    }
};"><pre class="notranslate"><code class="notranslate">module.exports = {
    entry: {
        page1: './page1.js',
        page2: './page2.js'
    },
    output: {
        filename: '[name].dist.js'
    }
};
</code></pre></div>