生产环境下Source Maps映射失效，错误行号无法定位求助

本地执行npm start运行应用时，Source Maps可正常工作，能精确定位至异常的具体行号；但执行npm run make打包生成myApp.app后，Source Maps失效，错误日志仅显示打包后的路径：.app/Contents/Resources/app/.webpack/main/index.js:8:109084，无法映射至原文件行号。

当前Webpack配置 #

import type { Configuration } from 'webpack';
import { rules } from './webpack.rules';

// Define base configuration
const baseConfig: Configuration = {
  devtool: 'source-map',
  plugins: [
  ],
};

export const mainConfig: Configuration = {
    /**
   * This is the main entry point for your application, it's the first file
   * that runs in the main process.
   */
  entry: './src/main/main.js',
  // Put your normal webpack config below here
  module: {
    rules,
  },
  resolve: {
    extensions: ['.js', '.ts', '.jsx', '.tsx', '.css', '.json'],
  },
  externals: process.platform === 'darwin' ? [
    '@myApp/ffi-napi',
    '@myApp/ref-napi',
  ] : [
    '@myApp/electron-edge-js'
  ],
};

const mergedConfig: Configuration = {
  ...baseConfig,
  ...mainConfig,
  plugins: [...(baseConfig.plugins || []), ...(mainConfig.plugins || [])],
};


export default mergedConfig;

package.json相关配置 #

"scripts": {
    "start": "electron-forge start",
    "test-win": "nyc --use-spawn-wrap --reporter=cobertura electron-mocha ./test/**/*Test.{js,ts} --require ./test/test_setup.js --timeout 10000 --require ts-node/register",
    "test": "nyc --reporter=cobertura electron-mocha ./test/**/*Test.{js,ts} --require ./test/test_setup.js --timeout 10000 --require ts-node/register",
    "coverage": "./codecov.sh",
    "win-coverage": "codecov.bat",
    "package": "electron-forge package --arch=x64",
    "make": "electron-forge make --arch=x64",
    "build": "npm install --force --loglevel=error && electron-rebuild ",
    "rebuild": "electron-rebuild",
    "installAppDmg": "npm install --force --loglevel=error appdmg@0.6.0",
    "postinstall": "npmpd",
    "playwright": "NODE_ENV=prod ENV=prod npx playwright test --workers 1",
    "lint": "eslint 'src/main/**/*.ts'"
  },
  "devDependencies": {
    "@electron-forge/cli": "^6.1.1",
    "@electron-forge/maker-deb": "^6.1.1",
    "@electron-forge/maker-rpm": "^6.1.1",
    "@electron-forge/maker-squirrel": "^6.1.1",
    "@electron-forge/maker-zip": "^6.1.1",
    "@electron-forge/plugin-auto-unpack-natives": "^6.4.2",
    "@electron-forge/plugin-webpack": "^6.1.1",
    "@playwright/test": "^1.37.0",
    "@types/chai": "^5.0.0",
    "@types/debug": "^4.1.12",
    "@types/draggabilly": "^2.1.4",
    "@types/fs-extra": "^11.0.4",
    "@types/lodash.isequal": "^4.5.7",
    "@types/mocha": "^10.0.9",
    "@types/node": "^20.12.13",
    "@types/react": "^18.2.12",
    "@types/react-dom": "^18.2.5",
    "@types/sinon": "^17.0.3",
    "@types/webpack-node-externals": "^3.0.2",
    "@typescript-eslint/eslint-plugin": "^5.62.0",
    "@typescript-eslint/parser": "^5.62.0",
    "@vercel/webpack-asset-relocator-loader": "1.7.3",
    "chai": "^4.5.0",
    "copy-webpack-plugin": "^11.0.0",
    "cross-env": "^7.0.3",
    "css-loader": "^6.8.1",
    "draggabilly": "^3.0.0",
    "electron": "20.0.0",
    "eslint": "^8.57.1",
    "fork-ts-checker-webpack-plugin": "^7.3.0",
    "mocha": "^10.7.3",
    "node-fetch": "^2.6.6",
    "node-loader": "^2.0.0",
    "npm-platform-dependencies": "^0.1.0",
    "nyc": "^15.1.0",
    "rewire": "^6.0.0",
    "sass-loader": "^13.3.2",
    "sinon": "^11.1.2",
    "spectron": "^14.0.0",
    "style-loader": "^3.3.3",
    "ts-loader": "^9.4.3",
    "ts-node": "^10.9.1",
    "typescript": "^4.9.5",
    "webpack-node-externals": "^3.0.0"
  },

解决步骤 #

1. 开启Electron Forge生产环境Source Maps #

Electron Forge的Webpack插件默认在生产打包时禁用Source Maps，需在forge.config.js（无则新建）中明确开启：

module.exports = {
  plugins: [
    {
      name: '@electron-forge/plugin-webpack',
      config: {
        mainConfig: './webpack.main.config.js', // 对应你的主进程Webpack配置路径
        productionSourceMaps: true // 关键配置：启用生产环境Source Maps
      }
    }
  ]
};

2. 确保Webpack输出Source Map文件 #

在Webpack基础配置中添加output字段，明确Source Map的输出路径：

const baseConfig: Configuration = {
  devtool: 'source-map',
  output: {
    filename: '[name].js',
    sourceMapFilename: '[name].js.map'
  },
  plugins: []
};

3. 让Forge打包包含Source Map文件 #

修改forge.config.js的packagerConfig，确保.map文件被包含进App：

module.exports = {
  packagerConfig: {
    files: [
      '**/*',
      '**/*.map' // 明确包含所有Source Map文件
    ]
  },
  // 其他插件配置...
};

4. 配置正确的NODE_ENV环境变量 #

修改package.json中的make脚本，确保打包时处于生产环境：

"make": "cross-env NODE_ENV=production electron-forge make --arch=x64",

5. 验证打包结果 #

执行npm run package后，检查.app/Contents/Resources/app/.webpack/main目录下是否存在index.js.map文件。若存在，启动打包后的App触发错误，查看日志是否已能映射到原文件行号。

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