Property code splitting modules that import third-party libraries

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.

enter image description here

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")
};
0
source share

Source: https://habr.com/ru/post/1014046/


All Articles