如何使用 `dependOn` 从主入口点捆绑单独的应用程序文件？

Question

我有一个后端项目，我想使用 Webpack v5 进行捆绑。

我想将一些文件拆分成它们自己的包并将它们导入到主条目中。

主条目有一个 dependOn 键，其中包含主条目将使用的文件名数组。

这是webpack.config.json:

module.exports = {
  entry: {
    app: {
      import: './index.ts',
      dependOn: 'routes'
    },
    routes: ['./routes.ts']
  },

  output: {
    filename: '[name].js',
    libraryTarget: 'commonjs2',
    path: path.resolve(__dirname, 'build')
  },

  resolve: {
    extensions: ['.ts', '.js']
  },

  target: 'node',

  externals: [
    nodeExternals()
  ],

  mode: 'production',

  optimization: {
    minimize: false,
  },

  module: {
    rules: [{ test: /\.tsx?$/, loader: 'ts-loader' }]
  },

  plugins: [
    new ContextReplacementPlugin(/any-promise/)
  ]
};

在运行之后，生成两个文件（app.js 和 routes.js），如预期的那样。但是当运行使用 NodeJS 的入口点时，我收到以下错误： webpack_require.C 不存在。

通过 documentation 我看到他们的例子 dependOn 是基于包而不是独立的应用程序文件。

您可以将应用程序文件添加到 dependOn 吗？这与模块分辨率有关吗？

Answer 1

假设您已将 routes 导入到 app 中，并且您想将 routes 拆分为一个单独的捆绑包，而不是包含在捆绑包中 app.js ].

以下是使用 SplitChunksPlugin https://webpack.js.org/plugins/split-chunks-plugin.

的方法

module.exports = {
    entry: {
        app: "./index"
    },
    target: "node",
    optimization: {
        splitChunks: {
            cacheGroups: {
                routes: {
                    filename: "routes.js",
                    test: module => {
                        return module.resource && module.resource.includes("routes");
                    },
                    enforce: true,
                    chunks: "all"
                }
            }
        }
    }
};

Webpack 会输出两个文件，app.js 和 routes.js.

如何使用 `dependOn` 从主入口点捆绑单独的应用程序文件？

how to use `dependOn` to bundle separate application files from the main entry point?

node.js

node-modules

webpack