我有一个多条目应用程序，其中在一个网页中加载了多个条目。在这里，我收到以下错误“未捕获的 TypeError：webpack_require .r不是函数”。我分析了 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。
我在这里看到两个问题。
- 为什么 webpack 使用来自单独块的模块 C 而不是文件 B 的输出？
- 为什么文件 B 的输出中没有定义 r？
根据 webpack 的评论，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);