怎样不输出 CRA 工程的 sourceMap 文件

使用 Create React App 创建的单页应用生产环境下默认会使用 sourceMap 文件，这些文件一般很大，最好不要将它们部署到服务器上。当然，我们可以手动删除已经输出的文件，高级一点还可以使用一个 node 程序来批量删除。但能不能简单一点，通过 webpack 不输出 sourceMap 文件呢？

Create React App 这个工具链是官方推荐的的最佳方式，不过默认下它隐藏了 Webpack，无法直接修改配置，因此我们想自定义一些配置比较麻烦。目前能自定义的方式主要有：

一、使用 eject

在 package.json 中很容易找到该命令，运行该命令会还原 react-scripts 隐藏的 Webpack 配置，通过 Webpack 配置文件我们就可以随心所欲地自定义了。注意，该过程是不可以逆的，会生成很多工程文件。小心使用为妙！

二、使用 config-overrides.js

这是一种通过覆盖 webpack 原有默认配置的方式一定来自定义的方式。

1. 安装依赖

npm i -D react-app-rewired customize-cra

2. 修改 package.json 脚本

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
   "test": "react-scripts test --env=jsdom"
  ...
}

3. 设置 config-overrides.js

比如我们要在生产环境不输出 sourceMap 文件，可以在项目的根目录下新建 config-overrides.js，然后这样定义：

const { override } = require('customize-cra');
module.exports = override(
  (() => (config, env) => {
    if (env === 'production') {
      config.output.publicPath = '';
      config.devtool = false;
    }
    return config;
  })()
)

运行 npm run build 后会发现，确实不会输出 js 的 sourceMap 文件，但 CSS 的 sourceMap 文件依然照输不误。尝试使用 customize-cra 插件的其它方法也无功而返。直到我仔细阅读了 Create React App 文档，最终找到了办法。

三、使用 .env

项目的根目录下新建 .env.production，该文件只对生产环境有效，然后这样定义：

GENERATE_SOURCEMAP = false

运行 npm run build 后，JavaScript、CSS 的 sourceMap 文件都不会输出。一切都安静了，真好！

参考

https://create-react-app.dev/docs/advanced-configuration