I tried to simplify this as much as possible. Hope this makes sense. I am trying to use Webpack code splitting to dynamically load a module. This other module imports a third-party library, for this example it is imported rxjs.
main.ts
import 'rxjs';
console.log('Yay!');
declare let System: any;
System.import('../test-package/index').then(module => {
console.log(module);
});
/test-package/index.ts
import 'rxjs';
export function test() {
console.log('INVOKED!');
}
I set up CommonsChunkPluginto pull anyone node_modulesinvendor.js
The mesh is split, but rxjs is included in both the vendor and the branched package. As you can see 0.js(split package) Includes another copy of rxjs.

webpack.config.js
var path = require("path");
var webpack = require("webpack");
var HtmlWebpackPlugin = require('html-webpack-plugin');
const { CheckerPlugin } = require('awesome-typescript-loader')
module.exports = {
entry: {
main: "./src/main.ts"
},
devtool: 'source-map',
resolve: {
extensions: ['.ts', '.js']
},
output: {
path: path.join(__dirname, "dist"),
filename: "[name].js",
chunkFilename: "[name].js"
},
module: {
rules: [
{
test: /\.ts$/,
loader: 'awesome-typescript-loader'
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new webpack.DefinePlugin({
"process.env.NODE_ENV": JSON.stringify("production")
}),
new CheckerPlugin(),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: (module, count) => {
return module.resource && (/node_modules/).test(module.resource);
}
})
],
recordsOutputPath: path.join(__dirname, "js", "records.json")
};
source
share