Webpack：是否可以仅在生产中隐藏源映射？答案

【问题标题】：Webpack: is that possible to hide source map only in production?Webpack：是否可以仅在生产中隐藏源映射？
【发布时间】：2020-01-12 01:26:21
【问题描述】：

我想在浏览器中本地调试我的 react 应用程序，但是我在 webpack.config.js 文件中将 devtool 属性设置为 hidden-source-map 以便在生产中隐藏我的源代码。是否有可能在不将我的源映射暴露于生产环境的情况下进行本地调试？

【问题讨论】：

标签： reactjs webpack babeljs

【解决方案1】：

您可以在生产环境中启用源映射，但将其托管在仅允许来自白名单 IP 的请求的服务器中。如果请求来自未列入白名单的 IP，您可以只返回错误 403 或 404。

假设您正在将源地图上传到 amazon s3：

// we use webpack.SourceMapDevToolPlugin for more flexible setups. Set the 'devtool' option to 'false' when you are doing this.
plugins: [
   new webpack.SourceMapDevToolPlugin({
      filename: '[name].[contenthash].js.map',
      // this is a s3 private bucket that is only accessible via whitelisted IPs
      // regular user will not be able to access the bucket
      append: `\n//# sourceMappingURL=https://s3.ap-southeast-1.amazonaws.com/sources-maps/[url]`,
      ...options,
    }),

    // other plugins.
  ]

您生成的 JS 仍然会在文件末尾有魔术注释：

//# sourceMappingURL=https://s3.ap-southeast-1.amazonaws.com/sources-maps/main.js.map

但浏览器 devtools 只有在从白名单 IP 访问源地图时才能下载源地图，例如您的办公网络、公司 VPN 等。

另一种方法是您可以将sourceMappingURL 设置为localhost。使用这种方法，您应该在您的计算机上本地拥有所有可用的*.map 文件。当您想调试生产代码时，只需在本地启动一个静态服务器（例如：ecstatic）以提供源映射。这样，您可以确定只有您可以访问源映射。但是，在本地下载和提供源地图需要手动操作。

【讨论】：

【解决方案2】：

您可以为此使用环境变量。应该是这样的：

devtool: process.env.SOURCE_MAP ? 'inline-source-map' : 'hidden-source-map',

然后你可以运行这样的测试，例如：

SOURCE_MAP=true yarn test (just an example)

您应该查看此模块https://www.npmjs.com/package/dotenv。可以创建 .env 文件并将配置用于不同的流程，例如测试和构建，因此您不必在运行命令之前手动指定 env 变量。

如果你不想使用环境变量，你可以创建单独的 webpack 配置文件，也许一个包含生产环境和测试环境之间所有通用内容的文件，然后是扩展通用配置的更具体的配置（一个用于测试启用源映射的环境和禁用源映射的生产环境）。

【讨论】：