使用 razzle 4.x 和 webpack 5.x 在 server.js 中捆绑 node_modules

Question

我有一个 Razzle 应用程序，最近从 Razzle 3.3 更新到 4.2。为此，我更新了 package.json 中的许多包，包括 webpack。

对于我的 Razzle 3.3 实现，我通过在 razzle.config.js 中添加以下内容，将 node_modules 与我的 server.js 捆绑在一起。

module.exports = {
    modify: (config, { target }, webpack) => {
        const appConfig = { ...config };

        if (target === 'node') {
            // some changes to appConfig

            appConfig.externals = []; // this resulted in node_modules to be bundled with my server.js
        }
    }
};

然而，随着 Razzle 4.2 的更新，这不再有效。我在 Google 上搜索了很长一段时间，找不到任何有关 Razzle 4 是如何完成此操作的知识，但有很多帖子指出这是一个 babel-loader 问题，我认为这是一个问题可以通过更新我的配置来修复。在 Razzle 文档 上有一个关于“外部模块的转译”的部分' 但是我从示例中假设，这是针对单个模块的，而不是整个 node_modules 库。

每当我尝试在 CI 环境中运行应用程序时，都会收到以下错误：

Error: Cannot find module 'react'

如果将我的 node_modules 文件夹复制到构建中，我可以解决此错误，但这对我来说不是一个选项，并且我希望将 node_modules 与我的申请。

我想知道是否有人知道 Razzle 4.x/Webpack 5.x 是如何实现这一点的，无论哪一个是罪魁祸首？

Answer 1

更新配置是我的解决方案。

当 Razzle 更新到版本 3.3 时，他们弃用了 razzle.config.js 中旧的 modify 函数。他们用一种新方法取代了它，称为modifyWebpackConfig用于编写 razzle 配置。

所以我可以将我的代码更改为

module.exports = {
    modifyWebpackConfig: ({ env: { target }, webpackConfig, webpackObject }) => {
        const appConfig = { ...webpackConfig };

        if (target === 'node') {
            // some changes to appConfig

            appConfig.externals = [];
        }
    
        return appConfig;
    }
}