如何让 splitChunks 生成 commonjs requires() 语句？

Question

我有以下 Webpack 配置。我的应用程序由部署到 AWS Lambdas 的一堆脚本组成，因此目标是 Node 和 CommonJS。每个脚本都是入口点，尽管为了示例起见，我将其限制为两个。

入口点通常彼此使用相同的 libraries/dependencies，因此生成的文件包含大量重复项，我正在努力减少这些重复项。

我添加了包含 splitChunks 的 optimization 部分，/dist 中的输出文件看起来好多了。每个入口点文件都减少了很多，新的 vendor.js 更大了。总文件大小减少了 5 倍多。

问题是这样做破坏了我的应用程序。它无法再正确解析依赖关系。我将 Webpack 置于开发模式，以便我可以浏览输出。我检查了生成的 add-comment.js 并没有提到 require('./vendor.js') 之类的东西，实际上根本没有使用 'vendor' 这个词。

是否有一些我可以更改的配置，以便每个入口点都能获得对 vendor.js 的引用？或者我可能误解了它应该如何工作？

module.exports = [
    {
        name: 'Server',
        mode: 'development',
        entry: {
            'add-comment': './server/add-comment.ts',
            'delete-comment': './server/delete-comment.ts'
        },
        output: {
            filename: 'server/[name].js',
            libraryTarget: 'commonjs'
        },
        target: 'node',
        resolve: {
            extensions: ['.ts', '.js']
        },
        module: {
            rules: [
                {
                    test: /\.ts$/,
                    exclude: /node_modules/,
                    use: [{
                        loader: 'ts-loader',
                        options: {
                            configFile: "server/tsconfig.json"
                        }
                    }]
                }
            ]
        },
        externals: ['aws-sdk'],
        optimization: {
            splitChunks: {
                name: 'vendor',
                chunks: 'all'
            }   
        }
    }
]

不确定是否相关，但这是我的 tsconfig. "module": "commonjs" 和其他一些东西是由 extends 指令引入的。 Here's the rest

{
    "$schema": "https://json.schemastore.org/tsconfig",
    "extends": "@tsconfig/node14/tsconfig.json",
    "compilerOptions":
    {
        "moduleResolution": "node",
        "target": "ES2019",
        "strict": false,
        "types": ["jest", "webpack-env"]
    }
}

如果我使用 HtmlWebpackPlugin（这不适用于我的情况，因为我的目标是 Node，而不是浏览器）那么它将按以下顺序生成脚本。

<script src="server/vendor.js"></script>
<script src="server/add-comment.js"></script>
<script src="server/delete-comment.js"></script>

所以 Webpack 清楚地知道 vendor 需要首先加载，但是关于我的配置的一些东西意味着它不理解我的代码是如何被调用的。我已经 target: 'node'，也许我还需要其他东西。

Answer 1

这是 implemented in Webpack 5。据我所知，没有向后移植它的计划。

Webpack 4 和 Webpack 5 之间存在不兼容性。output 部分需要更改为：

output: {
    filename: 'server/[name].js',
    library {
        type: 'commonjs'
    }
},

如何让 splitChunks 生成 commonjs requires() 语句？

How to make splitChunks generate commonjs requires() statements?

commonjs

typescript

webpack

webpack-4