开发模式可上传Sentry Sourcemap，生产模式无法上传求助

我尝试将Sourcemap上传至Sentry，发现只有Webpack开发模式构建时能成功上传，生产模式构建后无法完成上传。推测问题源于开发模式构建会将文件输出至指定目录，而生产模式构建后output.path指定的目录为空。

执行的构建命令 #

• 生产模式命令：

  UPLOAD_SOURCE_MAP=true NODE_ENV=production && webpack --mode production -d source-map
  

• 开发模式命令：

  npm ci --legacy-peer-deps && NODE_ENV=development && UPLOAD_SOURCE_MAP=true webpack --mode development -d inline-source-map --watch
  

webpack.config.mjs配置文件 #

import * as path from 'path';
import { fileURLToPath } from 'url';
import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
const __dirname = path.dirname(fileURLToPath(import.meta.url));
import { sentryWebpackPlugin } from "@sentry/webpack-plugin";

const BUILD_DIR = path.resolve(__dirname, 'app/webroot/js/react_build');
const APP_DIR = path.resolve(__dirname, 'app/react/components');

const config = {
    entry: {
        reactvendors: { import: ['react', 'react-dom'] },
        LoginHistory: {
            import: `${APP_DIR}/Login_History/render.tsx`,
            dependOn: 'reactvendors',
        },
        MarketingExpense: {
            import: `${APP_DIR}/Marketing_Expense/render.tsx`,
            dependOn: 'reactvendors',
        },
        MetricDrillDown: {
            import: `${APP_DIR}/Metric_Drill_Down/render.tsx`,
            dependOn: 'reactvendors',
        },
        MyDashboard: {
            import: `${APP_DIR}/My_Dashboard/render.tsx`,
            dependOn: 'reactvendors',
        },
        OrderHistory: {
            import: `${APP_DIR}/Order_History/render.tsx`,
            dependOn: 'reactvendors',
        },
        ProgressGraphs: {
            import: `${APP_DIR}/Progress_Graphs/render.tsx`,
            dependOn: 'reactvendors',
        },
        WorkoutForm: {
            import: `${APP_DIR}/Workout_Form/render.tsx`,
            dependOn: 'reactvendors',
        },
    },
    output: {
        path: BUILD_DIR,
        filename: '[name].bundle.js',
        chunkFilename: 'chunk-[name].[contenthash].js',
        publicPath: '/js/react_build/',
        clean: true,
    },
    module: {
        rules: [
            {
                test: /\.tsx$/,
                exclude: [
                    /node_modules/,
                    `${APP_DIR}/app/react/components/**/*.test.tsx`
                ],
                include: APP_DIR,
                use: {
                    loader: 'ts-loader',
                },
            },
            {
                test: /\.(scss|css)$/,
                include: APP_DIR,
                use: [
                    { loader: "style-loader" },
                    { loader: "css-loader", options: { importLoaders: 1 } },
                    { loader: "postcss-loader",
                        options: {
                            postcssOptions: {
                                plugins: [
                                    [
                                        "autoprefixer",
                                    ],
                                ],
                            }
                        }
                    },
                    { loader: "sass-loader" },
                ],
            }
        ],
    },
    resolve: {
        plugins: [new TsconfigPathsPlugin()],
        extensions: ['.tsx', '.ts', '.js', '.scss'],
    },
    plugins: [].concat(
        process.env.UPLOAD_SOURCE_MAP ?
            sentryWebpackPlugin({
                org: "the-perfect-workout",
                project: "react-athena",

                // Auth tokens can be obtained from https://sentry.io/settings/account/api/auth-tokens/
                // and need `project:releases` and `org:read` scopes
                authToken: 'removed for stack overflow',
            }) : []
    )
};

export default config;

排查与修复方案 #

1. 修正环境变量传递方式 #

生产模式命令中，&&会将环境变量的作用范围限制在前面的空命令，导致Webpack无法读取UPLOAD_SOURCE_MAP。正确写法是去掉&&，让环境变量直接作用于Webpack：

UPLOAD_SOURCE_MAP=true NODE_ENV=production webpack --mode production -d source-map

2. 确认Sourcemap生成逻辑 #

生产模式使用-d source-map会生成外部.map文件，这是Sentry插件需要的格式（开发模式用的inline-source-map会把Sourcemap嵌入js文件，不适合生产上传）。确保构建后BUILD_DIR目录下能看到.js和对应的.map文件。

3. 检查output.clean的影响 #

配置中output.clean: true会在构建前清空输出目录，如果Webpack构建失败或Sentry插件在清理后才读取文件，就会找不到资源。可以临时将clean改为false，验证文件是否正常生成。

4. 完善Sentry插件配置 #

给插件明确指定文件范围和版本信息，避免漏传：

sentryWebpackPlugin({
    org: "the-perfect-workout",
    project: "react-athena",
    authToken: '你的授权令牌',
    include: BUILD_DIR,
    deleteAfterCompile: false,
    release: `react-athena@${process.env.npm_package_version}`
})

5. 查看详细构建日志 #

运行生产构建时添加--progress --verbose参数，查看Webpack和Sentry插件的输出日志，定位是否存在文件缺失、权限或网络错误。

内容的提问来源于stack exchange，提问作者William Coan