reactjs - Webpack:是否可以仅在生产中隐藏源 map ？

Question

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

Answer 1

您可以在生产环境中启用 source-map，但将其托管在只允许来自白名单 IP 的请求的服务器中。如果请求来自非白名单 IP，您可以直接返回错误 403 或 404。

假设您正在将源 map 上传到 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

但是浏览器开发者工具只有在从白名单 IP 访问它时才能下载源映射，例如您的办公室网络、公司 VPN 等。

另一种方法是您可以将 sourceMappingURL 设置为 localhost。使用这种方法，您应该在您的机器上本地获得所有 *.map 文件。当你想调试生产代码时，只需在本地启动一个静态服务器(例如:ecstatic)来提供源映射。这样，您可以确定只有您可以访问源 map 。但是，它需要手动工作才能在本地下载和提供源 map 。