解决 Cannot find module ‘webpack’ 错误

要解决“Cannot find module ‘webpack’”错误，需要确保通过运行 npm i -g webpack 命令全局安装 webpack，并通过运行 npm link webpack 命令创建从全局安装的包到 node_modules 的符号链接。

在项目的根目录（package.json 文件所在的位置）中打开终端并运行以下命令：

# ✅ Install Webpack globally
$ npm install -g webpack webpack-cli

# ✅ 从全局包创建符号链接
# 到当前文件夹的 node_modules/
$ npm link webpack

运行这两个命令后，错误应该得到解决。

如果 webpack 的全局安装失败，我们可能必须运行以 sudo 为前缀的命令。

# ?️ 如果遇到权限错误，请使用 sudo 运行
$ sudo npm install -g webpack webpack-cli

$ npm link webpack

npm link 命令创建一个从全局安装的包到当前文件夹的 node_modules/ 目录的符号链接。

如果错误没有解决，请尝试在本地安装 webpack 和 webpack-cli。

在项目的根目录（package.json 文件所在的位置）中打开终端并运行以下命令：

$ npm install --save-dev webpack webpack-cli

这会将 webpack 添加到项目的开发依赖项中，因此我们不必运行链接命令。

如果错误未解决，请尝试删除 node_modules 和 package-lock.json（不是 package.json）文件，重新运行 npm install 并重新启动 IDE。

# ?️ 删除 node_modules 和 package-lock.json
$ rm -rf node_modules
$ rm -f package-lock.json
# ?️ 删除 dist 或者 build (webpack 输出文件的目录)
$ rm -rf dist

# ?️ 清除 npm 缓存
$ npm cache clean --force

$ npm install

如果有 dist 或 build 文件夹，请确保也删除它。 这是 webpack 输出文件的地方。

如果错误仍然存在，请确保重新启动 IDE。 VSCode 经常出现故障，有时重启可以解决问题。

如果我们仍然收到“Cannot find module ‘webpack’”错误，请打开 package.json 文件并确保它包含 devDependencies 对象中的 webpack 包。

{
  // ... rest
  "devDependencies": {
    "webpack": "^5.70.0",
    "webpack-cli": "^4.9.2"
    // ... rest
  }
}

我们可以尝试手动添加该行并重新运行 npm install。

$ npm install

或者安装最新版本的软件包：

$ npm install --save-dev webpack@latest webpack-cli@latest

火焰兔

海报 链接