如何在expo build:web构建时禁用sourcemap生成以避免源码泄露

前置说明 #

你之前使用的GENERATE_SOURCEMAP是Create React App框架的专属环境变量，Expo Web的构建逻辑不识别该变量，因此三种配置方式均不会生效。

可行配置步骤 #

方案1：自定义Webpack配置关闭SourceMap（全版本兼容） #

• 第一步：安装Expo Webpack配置依赖

npm install @expo/webpack-config -D
# 若使用yarn：yarn add @expo/webpack-config -D
# 若使用pnpm：pnpm add @expo/webpack-config -D

• 第二步：项目根目录新建webpack.config.js文件，添加如下内容：

const createExpoWebpackConfigAsync = require('@expo/webpack-config');

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync({
    ...env,
    production: env.mode === 'production'
  }, argv);

  // 生产环境禁用SourceMap
  if (env.mode === 'production') {
    config.devtool = false;
  }

  return config;
};

• 第三步：重新执行构建命令即可：
  expo build:web

方案2：额外增强源码保护（可选） #

仅关闭SourceMap只能避免开发者工具直接映射到原始源码，压缩后的JS代码仍可被格式化后阅读逻辑，可通过开启代码混淆进一步提升保护程度：
如果配置后运行构建提示找不到terser-webpack-plugin，可先执行npm install terser-webpack-plugin -D安装依赖
修改上面的webpack配置，添加Terser压缩混淆配置：

const createExpoWebpackConfigAsync = require('@expo/webpack-config');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync({
    ...env,
    production: env.mode === 'production'
  }, argv);

  if (env.mode === 'production') {
    config.devtool = false;
    // 替换默认压缩规则，开启强混淆
    config.optimization.minimizer = [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true, // 可选：移除console语句
            drop_debugger: true
          },
          mangle: true, // 开启变量名混淆
          format: {
            comments: false // 移除所有注释
          }
        },
        extractComments: false // 不单独提取注释文件
      })
    ]
  }

  return config;
};

验证效果 #

构建完成后查看输出的dist目录，不存在.map后缀的文件即为配置生效，部署后浏览器开发者工具将无法直接查看到原始源码。

内容的提问来源于stack exchange，提问作者Monolord's Knight