未捕获的类型错误：__webpack_require__.r 不是函数

Question

我有一个多条目应用程序，其中多个条目加载到一个网页中。在这里，我收到以下错误“Uncaught TypeError: webpack_require.r is not a function”。我分析了 webpack 构建输出并得出以下结论。

条目 A 和 B 都需要模块 C。A 和 B 的输出都加载在一个页面中。对于条目 B，webpack 为 C 创建了一个单独的块，其中还包含一些其他模块。但是对于 B，webpack 将 C 包含在与 B 的输出相同的文件中。当从 B 调用模块 C 时，它使用的是单独的块文件而不是 B 的输出文件中包含的模块。

现在的问题是来自单独块的模块 C 正在调用

__webpack_require__.r(__webpack_exports__);

而包含在 B 的输出文件中的模块 C 没有。并且在 B webpack 的上下文中不知何故没有定义 r。

我发现这里有 2 个问题。

1. 为什么 webpack 使用来自单独块的模块 C 而不是文件 B 的输出？
2. 为什么文件 B 的输出中没有定义 r？

根据 webpack cmets r 是“在导出上定义 __esModule”。我能否以某种方式强制为给定条目定义 r，因为这可能会解决此错误？

我正在使用 webpack 5.28.0

const AssetsPlugin = require('assets-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { VueLoaderPlugin } = require('vue-loader');
const webpack = require('webpack');
const path = require('path');
const packageJson = require("./package.json");

module.exports = {
    entry: {
        'account': './src/apps/account/account.js',
        'admin-dashboard': './src/apps/admin/dashboard.js',
        'admin-statistics': './src/apps/admin/statistics.js',
        'conflicts': './src/apps/conflicts.js',
        'create-useraccount': './src/apps/account/free/create-useraccount.js',
        'confirm-temporary-useraccount': './src/apps/account/free/confirm-temporary-useraccount.js',
        'confirm-useraccount': './src/apps/account/free/confirm-useraccount.js',
        'login': './src/apps/account/login.js',
        'project-issues': './src/apps/project-issues.js',
        'project': './src/apps/project.js',
        'my-settings': './src/apps/my-settings.js',
        'my-space': './src/apps/my-space.js',
        'model': './src/apps/model.js',
        'ifc-property-lists': './src/apps/ifc-property-lists.js',
        'settings': './src/apps/settings.js'
    },
    output: {
        assetModuleFilename: "[name].[contenthash][ext][query]",
        chunkFilename: "[name].[contenthash].js",
        filename: "[name].[contenthash].js",
        publicPath: '/webapp/dist/',
        clean: true
    },
    optimization: {
        minimize: true,
        minimizer: [
            `...`,
            new CssMinimizerPlugin(),
        ],
        splitChunks: {
            chunks: 'all'
        },
        usedExports: true
    },
    mode: 'production',
    module: {
        rules: [
            {
                test: require.resolve("jquery"),
                loader: "expose-loader",
                options: {
                    exposes: [{
                        globalName: "$",
                        override: true
                    }, {
                        globalName: "jQuery",
                        override: true
                    }]
                }
            }, {
                test: /\.vue$/,
                loader: 'vue-loader'
            }, {
                test: /\.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader'
                    }, {
                        loader: 'resolve-url-loader',
                        options: {
                            removeCR: true
                        }
                    }, {
                        loader: 'less-loader'
                    }
                ]
            }, {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    MiniCssExtractPlugin.loader, {
                        loader: 'css-loader'
                    }, {
                        loader: 'resolve-url-loader',
                        options: {
                            removeCR: true
                        }
                    }, {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true,
                            sassOptions: {
                                includePaths: [
                                    path.resolve(__dirname, "./node_modules/@syncfusion")
                                ]
                            }
                        }
                    }]
            }, {
                test: /\.js$/,
                exclude: [/assets/, /node_modules\\(?!@bimcollab)/],
                loader: 'babel-loader'
            }, {
                test: /\.(png|jpg|gif|woff(2)?)$/,
                type: 'asset'
            }]
    },
    plugins: [
        new AssetsPlugin({ // Creates 'webpack-assets.json' file with all asset paths
            prettyPrint: true,
            entrypoints: true
        }),
        new BundleAnalyzerPlugin({
            analyzerMode: "static",
            openAnalyzer: false
        }),
        new VueLoaderPlugin(),
        new MiniCssExtractPlugin({
            chunkFilename: "[name].[contenthash].css",
            filename: "[name].[contenthash].css"
        }),
        new webpack.DefinePlugin({
            "process.env": JSON.stringify(process.env)
        })
    ],
    resolve: {
        alias: {
            '@src': path.resolve(__dirname, 'src/'),
            '@assets': path.resolve(__dirname, 'assets/'),
        }
    }
};

console.log(packageJson.version);

Answer 1

我找到了解决这个问题的方法。如前所述，这里真正的问题是，对于条目 B，webpack 将模块 C 的代码放入 B 的输出文件中，而在运行时它试图从其单独的块文件（由 webpack 为条目 A 创建)。

现在，如果我强制 webpack 总是将模块 C 放入一个单独的块中，它可以解决问题。在这种情况下，webpack 只为模块 C 创建一个文件，因此在运行时它将始终使用单个正确的文件。为此，我使用了 cacheGroups。在下面的案例中，问题出在 BootstrapVue 中，但我也看到其他模块也出现了同样的问题。

splitChunks: {
   chunks: 'all',
   cacheGroups: {
      bootstrapVue: {
         test: /[\\/]node_modules[\\/]bootstrap-vue[\\/]/,
         name: 'bootstrap-vue',
      },
   }
}