create-react-app build 打包隐藏源码

Posted 2023-02-16

参考技术A 在使用 create-react-app 时，打包生产环境 npm run build ，浏览器打开后仍然是可以看到源码的。

在这里以新建一个默认项目为例：

项目根目录新建 .env.production 文件，内容如下：

然后重新打包，浏览器打开后就看不到源码啦。

为了探究原理，执行 eject 后，可以看到webpack配置中有这么一段

这里的 process.env.GENERATE_SOURCEMAP 控制着是否捎带源码。所以我们可以配置环境变量 GENERATE_SOURCEMAP=false 即可。

当执行 build 时，将按顺序优先寻找 .env.production.local , .env.production , .env.local , .env 文件来配置环境变量，所以就有了上面的操作。

更多关于环境变量的信息可查看 Adding Custom Environment Variables 。