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 CommonsChunkPlugin
to pull anyone node_modules
invendor.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