使用 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 的更新，这不再有效。我在谷歌上搜索了很长一段时间，找不到关于如何使用 Razzle 4 完成此操作的任何知识，但有很多帖子指出这是一个 babel-loader 问题，我认为可以通过更新我的配置。在 Razzle documentation 上有一个关于 'Transpilation of External modules' 的部分，但是我从示例中假设，这是针对单个模块的，而不是整个 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 功能。他们将其替换为 a new method，因为编写 razzle 配置而被称为 modifyWebpackConfig。

所以我可以将代码更改为

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

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

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

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

Bundling node_modules in server.js with razzle 4.x and webpack 5.x

bundle

node.js

webpack

babel-loader

razzle