本地安装webpack后command not found问题求助（拒绝全局安装）

问题说明 #

本地安装webpack后无法运行相关命令，执行npm install --save-dev webpack webpack-cli无效，npx webpack也无法正常工作。尝试过本地安装、使用npx webpack的方案均未解决。不希望全局安装（官方不推荐），同时想了解node_modules/.bin/webpack的具体含义。

环境信息 #

• Node版本：20.4.0
• npm版本：9.7.2

已执行的安装命令 #

npm install --save-dev webpack webpack-cli

项目package.json内容 #

{
  "name": "webpack-starter",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.88.2",
    "webpack-cli": "^5.1.4"
  }
}

报错信息 #

执行npm run start报错 #

webpack-starter|⇒ npm run start

> webpack-starter@1.0.0 start
> webpack

sh: webpack: command not found

执行npx webpack报错 #

webpack-starter|⇒ npx webpack
CLI for webpack must be installed.
  webpack-cli (https://github.com/webpack/webpack-cli)

We will use "npm" to install the CLI via "npm install -D webpack-cli".
Do you want to install 'webpack-cli' (yes/no): yes
Installing 'webpack-cli' (running 'npm install -D webpack-cli')...

up to date, audited 1 package in 386ms

found 0 vulnerabilities
Error: Cannot find module 'webpack-cli/package.json'
Require stack:
- /Users/brados/.npm/_npx/89d6e678e21f2dae/node_modules/webpack/bin/webpack.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1048:15)
    at Function.resolve (node:internal/helpers:125:19)
    at runCli (/Users/brados/.npm/_npx/89d6e678e21f2dae/node_modules/webpack/bin/webpack.js:78:26)
    at /Users/brados/.npm/_npx/89d6e678e21f2dae/node_modules/webpack/bin/webpack.js:178:5
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/brados/.npm/_npx/89d6e678e21f2dae/node_modules/webpack/bin/webpack.js'
  ]
}

解决方法 #

1. 清理缓存并重新安装 #

彻底清理现有依赖和缓存后重新安装，解决可能的依赖损坏问题：

# 删除本地依赖文件夹和锁文件
rm -rf node_modules package-lock.json
# 清理npm缓存
npm cache clean --force
# 重新安装webpack及cli
npm install --save-dev webpack webpack-cli

2. 直接调用本地可执行文件 #

官方提到的node_modules/.bin/webpack，是指本地安装的webpack可执行文件会被生成在项目的node_modules/.bin目录下，你可以直接通过以下命令运行：

./node_modules/.bin/webpack

npm脚本会自动识别node_modules/.bin下的命令，重新安装后npm run start应该可以正常执行。

3. 强制npx使用本地依赖 #

npx可能因缓存问题无法识别本地已安装的webpack-cli，执行以下命令强制使用本地依赖：

npx --no-install webpack

4. 确认版本兼容性 #

当前webpack@5.88.2与webpack-cli@5.1.4是兼容的，若仍有问题可尝试锁定版本重新安装：

npm install --save-dev webpack@5.88.2 webpack-cli@5.1.4

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