React craco 解决 webpack ＜ 5 used to include polyfills for node.js core …

在运行 React 项目时，报错：

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
        - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "path": false }

webpack compiled with 26 errors

原因呢是 webpack5 在精简后，移除了 nodejs 核心模块的 polyfill 自动引入，所以需要手动引入，如果打包过程中有使用到 nodejs 核心模块，webpack 会提示进行相应配置。

搜网上或看报错也知道如何解决，错误中已经说的很明白了，要么关闭，要么安装使用，比如上面的报错：

【不推荐】方式一：webpack.config.js 方式

• 执行 $ npm run eject 是否 webpack 配置文件，找到 config/webpack.config.js，搜索下 resolve: 配置，关闭一下配置：

  resolve: {
    fallback: {
      "path": false, // 上面报错说可以关闭这个，其他的可以注释看报错不报错，报错就继续追加关闭
      "assert": false,
      "stream": false,
      "constants": false,
      "util": false,
      "fs": false,
    },
    ...
  }
  

  除了关闭，也可以选择使用

  resolve: {
    fallback: {
      "path": require.resolve("path-browserify"), // 使用可能需要安装一下 npm i path-browserify，先重启看报错不报错，报错在安装
      ...
    },
    ...
  }
  

【推荐】方式二：craco.config.js 方式，这样就不需要释放 webpack 配置

• 附：@craco/craco 安装，可以理解为是 webpack.config.js 的外部扩展。

  const path = require('path')
  
  module.exports = {
    // webpack 配置
    webpack: {
      // 配置别名
      alias: {
        // 约定：使用 @ 表示 src 文件所在路径
        "@": path.resolve(__dirname, "src")
      },
      // 这种方式是无效的，错误写法
      // resolve: {
      //   fallback: {
      //     "path": false,
      //     "util": false,
      //     ...
      //   }
      // },
      // 这种方式才对的
      // configure: (webpackConfig, { env, paths }) => {
      //   // eslint-disable-next-line no-param-reassign
      //   webpackConfig.resolve.fallback = {
      //     "path": false,
      //     "util": false,
      //     "url": false,
      //     "http": false,
      //     "https": false,
      //     "stream": false,
      //     "assert": false,
      //     "querystring": false,
      //     "zlib": false
      //   }
      //   return webpackConfig
      // },
      // 也可以这么写
      configure: {
        resolve: {
          fallback: {
            "path": false,
            "util": false,
            "url": false,
            "http": false,
            "https": false,
            "stream": false,
            "assert": false,
            "querystring": false,
            "zlib": false
          }
        }
      }
    }
  }