升级Webpack至5.97.0后构建卡在70%，求解决方案

将Webpack从5.96.1升级到5.97.0后，项目构建卡在70%，终端输出停留在：

70% sealing finish module graph FlagDependencyExportsPlugin

查看更新日志未发现重大变更，暂未定位问题原因。已尝试设置optimization.providedExports = false，但不清楚该配置对生产环境的影响，目标是让项目恢复正常构建。

webpack.base配置 #

const path = require('path')
const webpack = require('webpack')
const HtmlWebPackPlugin = require('html-webpack-plugin')

module.exports = {
    releaseVersion: process.env.RELEASE_VERSION || 'unknown-0.1.0',
    config: {
        entry: ['./src/App.tsx'],
        output: {
            path: path.resolve(__dirname, '../dist'),
            filename: '[name].js',
            chunkFilename: '[name].js',
            publicPath: '/',
            pathinfo: false
        },
        context: path.resolve(__dirname, '../'),
        devtool: 'eval-cheap-module-source-map',
        resolve: {
            mainFields: ['browser', 'main', 'module'],
            extensions: ['.js', '.jsx', '.tsx', '.ts'],
            cacheWithContext: false,
            fallback: {
                // react-xml-viewer requires it
                stream: require.resolve('stream-browserify'),
                events: require.resolve('events'),
                buffer: require.resolve('buffer'),
                path: false,
                fs: false
            },
            alias: {
                react: path.resolve(__dirname, '../node_modules', 'react')
            }
        },
        module: {
            rules: [
                {
                    test: /\.m?js$/,
                    resolve: {
                        fullySpecified: false
                    }
                },
                {
                    test: /\.(t|j)sx?$/,
                    use: [
                        {
                            loader: 'thread-loader',
                            options: THREAD_OPTIONS
                        },
                        {
                            loader: 'babel-loader',
                            options: {
                                cacheCompression: false,
                                cacheDirectory: true
                            }
                        }
                    ],
                    include: [
                        path.resolve(__dirname, '../src'),
                        path.resolve(__dirname, '../@core')
                    ],
                    exclude: /node_modules/
                },
                {
                    test: /\.html$/,
                    use: 'html-loader',
                    exclude: /node_modules/
                },
                {
                    test: /\.(s*)css$/,
                    use: ['style-loader', 'css-loader', 'sass-loader']
                },
                {
                    test: /\.(woff2?|eot|ttf|gif|png|jpg|jpeg|svg)$/i,
                    type: 'asset/resource',
                    exclude: [/node_modules/]
                }
            ]
        },
        cache: {
            type: 'filesystem',
            cacheDirectory: path.resolve(__dirname, '../.webpack_cache'),
            buildDependencies: {
                config: [
                    __filename,
                    path.resolve(__dirname, '../babel.config.js'),
                    path.resolve(__dirname, '../package.json'),
                    path.resolve(__dirname, '../tsconfig.json')
                ]
            }
        },
        watchOptions: {
            ignored: /node_modules/
        },
        snapshot: {
            /*
             * An array of paths that are managed by a package manager
             * and can be trusted to not be modified otherwise.
             */
            managedPaths: [path.resolve(__dirname, '../node_modules')]
        },
        plugins: [
            new HtmlWebPackPlugin({
                template: './assets/index.html',
                filename: './index.html',
                favicon: './assets/images/Icon.ico'
            }),
            new webpack.EnvironmentPlugin(ENVS)
        ],
        optimization: { runtimeChunk: true, splitChunks: { chunks: 'all' } }
    }
}

webpack.dev配置 #

const path = require('path')
const webpackBase = require('./webpack.base')
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')

const plugins = [
    ...webpackBase.config.plugins,
    new ReactRefreshWebpackPlugin()
]

module.exports = {
    ...webpackBase.config,
    mode: 'development',
    devServer: {
        static: path.resolve(__dirname, '../dist'),
        historyApiFallback: true,
        liveReload: true,
        port: 8081,
        open: false
    },
    cache: {
        ...webpackBase.config.cache,
        buildDependencies: {
            config: [
                ...webpackBase.config.cache.buildDependencies.config,
                __filename
            ]
        }
    },
    plugins
}

可行解决方向 #

• 清理Webpack缓存：删除.webpack_cache目录后重新构建，新版本Webpack可能与旧缓存存在兼容性冲突。
• 临时关闭导出依赖分析：设置optimization.providedExports = false可跳过FlagDependencyExportsPlugin的处理，生产环境下会降低部分树摇（Tree Shaking）效率，但不会影响代码正常运行，适合临时解决构建阻塞问题，后续可等待Webpack官方修复该bug。
• 降级回稳定版本：若上述方案无效，可暂时降级到Webpack 5.96.1，保证开发流程不受影响。

内容的提问来源于stack exchange，提问作者Karine Brandelli Padilha