Webpack打包node-fetch时报Module not found及模块解析失败错误如何解决

首先你遇到的两个错误分别对应两个独立的问题，可按以下步骤逐一解决：

先确认运行环境（优先排查） #

你的代码是从浏览器端迁移过来的，先明确打包后代码的运行场景：

• 如果最终代码运行在浏览器：你的Webpack配置里target: "node"是错误的，且不需要引入node-fetch，浏览器原生自带fetch API。直接做两个修改即可解决所有问题：
  1. 删除代码中import fetch from "node-fetch"这一行
  2. 把Webpack配置里的target: "node"改成target: "web"
• 如果最终代码运行在Node.js环境：继续看下面的解决方案。

Node.js运行场景下的两种解决方案 #

方案一：降级node-fetch到v2（最简便，适合新手） #

你当前安装的应该是node-fetch v3及以上版本，这个版本是纯ESM格式，且依赖了很多新ES语法，对旧版Webpack配置不友好。降级到v2的CommonJS版本即可直接兼容：

1. 执行命令卸载当前版本：

npm uninstall node-fetch

2. 安装v2版本：

npm install node-fetch@2

3. 重新执行打包命令，绝大多数情况下两个错误都会直接消失。

方案二：修改Webpack配置适配最新版node-fetch #

如果必须使用最新版node-fetch，可按以下步骤修改配置：

1. 处理Can't resolve 'node:url'错误

这个错误是Webpack无法识别Node.js原生核心模块导致的，在Webpack配置的返回对象中新增如下配置：

// Webpack 5 配置
resolve: {
  extensions: ['.js'],
  // 新增fallback配置
  fallback: {
    "url": false,
    "http": false,
    "https": false,
    "zlib": false,
    "stream": false
  }
},
externalsPresets: {
  node: true // 告诉Webpack不打包Node.js核心模块，运行时直接调用环境原生模块
}

如果使用的是Webpack 4，直接安装node核心模块polyfill包即可。

2. 处理Unexpected character '#'错误

这个错误是formdata-polyfill依赖使用了私有类字段（#开头的ES新语法），Webpack默认没有配置转译node_modules下的这类语法，需要引入Babel转译：

1. 安装Babel相关依赖：

npm install @babel/core @babel/preset-env babel-loader --save-dev

2. 在Webpack配置的返回对象中新增module规则：

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules\/(?!(node-fetch|formdata-polyfill)\/).*/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

3. 重新执行打包即可。

内容的提问来源于stack exchange，提问作者Surya Srivastava