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

问题描述

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

入口点通常彼此使用相同的库/依赖项，因此生成的文件包含大量重复项，我正试图减少这些重复项。

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

问题是这样做破坏了我的应用程序。它无法再正确解析依赖项。我将 Webpack 置于开发模式，以便我可以浏览输出。我在生成的 add-comment.js 内部进行了检查，没有提及任何类似 require('./vendor.js') 的内容，实际上根本没有使用“供应商”一词。

是否有一些我可以更改的配置，以便每个入口点都能获得对 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 清楚地知道需要首先加载该供应商，但是关于我的配置的某些内容意味着它不了解我的代码是如何被调用的。我已经有 target: 'node'，也许我需要别的东西。

解决方法

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

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

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