typescript - 来自包的 Webpack 公共资源

Question

我在正确设置 webpack 以进行代码拆分时遇到了一些问题。我最终得到了很多重复的代码。

情况：

我有一个主项目，它是一个“配置”并部署到服务器。

然后是一个辅助项目“组件”，它基本上是“配置”项目的构建块。它被部署到私有 NPM 并在构建时被配置拉取。

一切正常，但是有很多重复的代码，除非我在生成 commons.js 的组件文件上使用“CommonsChunkPlugin”。但是我似乎无法让项目以这种方式运行。

您可以在这里看到文件大小非常正常。（与 commonchuncks）

由于大量重复代码，此处的文件大小太大。

现在我的问题是我是否要弄清楚如何使用“组件”中启用的 commonchunk 来运行它，或者我是否必须在“配置”中做一些 webpack 向导来解决这个问题。

组件 webpack.config.js

const webpack = require("webpack");
const path = require("path");
var nodeExternals = require('webpack-node-externals');
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

const outputPath = path.resolve(__dirname, 'build');


module.exports = {
    devtool: "source-map",
    entry: {
        init: "./src/init",
        main: "./src/main",
        platform: "./src/platform",
        card: "./src/card",
        store: "./src/store",
        login: "./src/login",
        helpers: "./src/helpers",
        authService: "./src/authService",
        customer: "./src/customer",
        role: "./src/role",
        user: "./src/user",
        project: "./src/project",
        device: "./src/device",
        devicetype: "./src/devicetype",
        sensortype: "./src/sensortype",
        asset: "./src/asset",
        assettype: "./src/assettype",
        graph: "./src/graph"
    },
    output: {
        path: outputPath,
        filename: "[name]/index.js",
        libraryTarget: "commonjs2"
    },
    externals: [nodeExternals()],
    target: "node",
    module: {
        rules: [
            {
                test: /\.(ts|tsx)$/,
                exclude: /node_modules/,
                loader: "ts-loader"
            },
            {
                test: /\.(graphql|gql)$/,
                exclude: /node_modules/,
                loader: 'graphql-tag/loader',
            }
        ],
    },
    resolve: {
        alias: {
            "react": path.join(__dirname, "node_modules", "react") // This prevents Webpack from resolving more than one React
        },
        extensions: [".js", ".jsx", ".ts", ".tsx"]
    },
    plugins: [

        new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /nl|en|fr/),

        new webpack.optimize.CommonsChunkPlugin({
            name: "commons",
            minChunks: 3
        }),


    ]
};

配置 webpack.config.js

const webpack = require("webpack");
const path = require("path");
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

const outputPath = path.resolve(__dirname, 'build');

module.exports = {
    devtool: "source-map",
    entry: {
        bundle: [
            "./src/main.tsx"
        ]
    },
    output: {
        path: outputPath,
        filename: "[name].js",
        publicPath: "/",
        chunkFilename: '[chunkhash].js'
    },
    externals: {
        environment: "environment"
    },
    module: {
        rules: [
            {
                test: /\.(ts|tsx)$/,
                use: [
                    {
                        loader: "babel-loader",
                        query: {
                            presets: ['es2015', 'react']
                        }
                    },
                    {
                        loader: "ts-loader"
                    }
                ]
            },
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                use: [{
                    loader: 'babel-loader',
                    options: {
                        presets: [['es2015', { modules: false }]],
                        plugins: ['syntax-dynamic-import']
                    }
                }]
            }
        ],
    },


    resolve: {
        modules: ["node_modules"],
        alias: {
            "react": path.join(__dirname, "node_modules", "react") // This prevents Webpack from resolving more than one React
        },
        extensions: [".js", ".jsx", ".ts", ".tsx"],
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            minChunks: function (module) {
                return module.context && module.context.indexOf('node_modules') !== -1;
            }
        }),


        new webpack.optimize.CommonsChunkPlugin({
            name: 'manifest'
        }),

        new webpack.optimize.ModuleConcatenationPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ],
    devServer: {
        contentBase: "./src",
        historyApiFallback: true,
        hot: true,
        port: 3000,
        stats: {
            colors: true
        }
    }
};

提前致谢 ！