使用react-app-rewired构建后，source-map-explorer无法找到Source Map的解决方法

问题场景 #

使用react-app-rewired构建React应用后，执行npm run analyze时终端报错：source-map-analyzer: Unable to find a source map。相关配置如下：

config-overrides.js #

const { override, useBabelRc, adjustStyleLoaders, addWebpackAlias } = require('customize-cra');
const glob = require('glob');
const path = require('path');

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

const addWebpackPlugins = (config, env) => {
  config.plugins.push(
    new UglifyJsPlugin({
      uglifyOptions: { compress: { unused: true, dead_code: true } },
    })
  );

  return config;
};

const disableChunking = (config) => {
  config.optimization.runtimeChunk = false;
  config.optimization.splitChunks = {
    cacheGroups: {
      default: false
    }
  };
  return config;
};

const cssLoader = adjustStyleLoaders(({ use: [ , css, postcss, resolve, processor ] }) => {
  css.options.sourceMap = true;         // css-loader
  postcss.options.sourceMap = true;     // postcss-loader
  // when enable pre-processor,
  // resolve-url-loader will be enabled too
  if (resolve) {
    resolve.options.sourceMap = true;   // resolve-url-loader
  }
  // pre-processor
  if (processor && processor.loader.includes('sass-loader')) {
    processor.options.sourceMap = true; // sass-loader
  }
})

const isProd = process.env.NODE_ENV.includes('prod');

// production
module.exports = override(
  // eslint-disable-next-line react-hooks/rules-of-hooks
  useBabelRc(),
  addWebpackAlias({
    '@styles': path.resolve(__dirname, './src/styles'),
  }),
  isProd ? addWebpackPlugins : null,
  isProd ? disableChunking : null,
  isProd ? cssLoader : null,
);

package.json #

{
  ...
  "devDependencies": {
    ...
    "source-map-explorer": "2.5.3",
  },
  "scripts": {
    "analyze": "source-map-explorer 'build/static/js/*.js'",
    "start": "NODE_ENV=dev && GENERATE_SOURCEMAP=true && react-app-rewired start",
    "build": "NODE_ENV=prod && GENERATE_SOURCEMAP=true && react-app-rewired build",
    "test": "jest",
    "eject": "react-app-rewired eject",
    "serve": "serve -s build"
  },
  ...
}

解决方案 #

1. 统一跨平台环境变量设置 #

Windows与类Unix系统的环境变量语法不一致，使用cross-env统一处理：

• 安装依赖：npm install cross-env --save-dev
• 修改package.json的scripts：

"scripts": {
  "analyze": "source-map-explorer 'build/static/js/*.js'",
  "start": "cross-env NODE_ENV=dev GENERATE_SOURCEMAP=true react-app-rewired start",
  "build": "cross-env NODE_ENV=prod GENERATE_SOURCEMAP=true react-app-rewired build",
  "test": "jest",
  "eject": "react-app-rewired eject",
  "serve": "serve -s build"
}

2. 保留UglifyJsPlugin的source map #

自定义的UglifyJsPlugin默认会移除source map，需显式开启sourceMap选项：
修改config-overrides.js中的插件配置：

// 若使用自定义函数方式
const addWebpackPlugins = () => config => {
  config.plugins.push(
    new UglifyJsPlugin({
      sourceMap: true, // 开启source map保留
      uglifyOptions: { compress: { unused: true, dead_code: true } },
    })
  );
  return config;
};

// 或直接使用customize-cra提供的addWebpackPlugins方法（更规范）
// 先导入该方法
const { override, useBabelRc, adjustStyleLoaders, addWebpackAlias, addWebpackPlugins } = require('customize-cra');

// 再修改override配置
module.exports = override(
  useBabelRc(),
  addWebpackAlias({
    '@styles': path.resolve(__dirname, './src/styles'),
  }),
  isProd ? addWebpackPlugins(new UglifyJsPlugin({
    sourceMap: true,
    uglifyOptions: { compress: { unused: true, dead_code: true } },
  })) : null,
  isProd ? disableChunking : null,
  isProd ? cssLoader : null,
);

3. 验证build产物 #

执行npm run build后，检查build/static/js/目录下是否生成了对应的.map文件。若存在，再运行npm run analyze即可正常分析包体积。

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