Issue 1:
Bug report

What is the current behavior?

Forgive me if I've misconfigured something, but it seems like if I import {Toggle} from 'react-powerplug' in chunk A and import {Interval} from 'react-powerplug' in chunk B, all of the react-powerplug code winds up in chunk A, because react-powerplug exports a single rollup bundled js module.

If the current behavior is a bug, please provide the steps to reproduce.

https://github.com/jedwards1211/webpack-code-splitting-issue

just clone, yarn install and run webpack. The output dist/main.js will contain all of the code being used from react-powerplug; the dist/1.js chunk imports Interval from main.js.

Here is what the relevant code looks like:

src/index.js

import {Toggle} from 'react-powerplug'
console.log(Toggle)

import('./chunk-b')

The output dist/main.js on my machine contained all of the code I used from react-powerplug, whereas dist/1.js just imports Interval from main.js:

(window.webpackJsonp=window.webpackJsonp||[]).push([[1],{3:function(o,n,s){"use strict";s.r(n);var w=s(1);console.log(w.a)}}]);

src/chunk-b.js

import {Interval} from 'react-powerplug'
console.log(Interval)

What is the expected behavior?

Code for react-powerplug's Toggle winds up in main.js, and code for Interval winds up in 1.js.

Given that it's becoming popular to release packages as rollup bundles, I want to make sure webpack will be able to include part of that rollup bundle in one chunk, and another part of the bundle in another.

Other relevant information:

webpack version: 4.16.2

Node.js version: 8

Operating System: macOS

Issue 2:
Feature request

Here is the bug-ish issue I'm running into:

https://github.com/jedwards1211/webpack-code-splitting-issue/tree/two-async-chunks

index.js

import('./chunk1.js')
import('./chunk2.js')

chunk1.js

import { Toggle } from 'react-powerplug';
console.log(Toggle)

chunk2.js

import { Value } from 'react-powerplug';
console.log(Value)

webpack.config.js

// webpack.config.js
module.exports = {
mode: 'production',
externals: {
'react': 'React'
},
}

webpack it on the command line

What is the expected behavior?

dist/1.js contains Toggle but not Value.

dist/2.js contains Value but not Toggle.

Current behavior

dist/1.js contains both Toggle and Value.

dist/2.js contains both Toggle and Value.

It seems that the tree shaking is applied to react-powerplug main module itself, irrespective of the individual chunks that are importing from it.

What is motivation or use case for adding/changing the behavior?

Many packages nowadays use rollup to bundle their code into a single JS module and distribute that one file (or maybe one bundle for ES5, one bundle for ES2015). As such, I want to be confident that Webpack will eliminate dead code effectively when several different chunks of my app are importing from a rollup bundle.

How should this be implemented in your opinion?

Hopefully, tree-shaking can be performed on react-powerplug for the import in chunk1.js, and then a second, different round of tree-shaking can be performed for the import in chunk2.js. Right now it seems like Webpack is only performing one tree-shaking operation on react-powerplug based upon all imports from it from all chunks in my app.

Are you willing to work on this yourself?

I would need a lot of guidance, as this seems like this might require a significant refactor