webpack答疑

1 输入webpack命令，执行的是全局版本还是本地版本的webpack

当在命令行窗口输入webpack命令时，其执行优先级可通过以下步骤明确判断：

1.1 【全局安装优先机制】

执行原理：系统会按照环境变量PATH的顺序逐级查找可执行文件
路径比对：
- 全局安装路径：npm install -g webpack会安装在类似/usr/local/bin（Mac/Linux）或C:\Users\用户名\AppData\Roaming\npm（Windows）的路径
  - 补充：如果已经全局安装了 Webpack，则可以简单地运行命令——webpack （依赖系统path，全局路径需在系统path中配置）
- 本地安装路径：npm install webpack会安装在项目目录的./node_modules/.bin/webpack
判定方式：
- 直接运行 webpack，系统按 PATH 顺序查找可执行文件。
- 如果全局安装路径（如 /usr/local/bin）在 PATH 中靠前 → 执行全局版本
- 如果本地路径 ./node_modules/.bin 被手动加入 PATH 并靠前 → 执行本地版本

1.2 【本地版本特殊调用场景】

必须满足以下任一条件才会使用本地安装：
- (1) 通过npx webpack显式调用（原理：npx会自动检索当前目录node_modules）
- (2) 在package.json的scripts中配置了"build": "webpack"后通过npm run build执行（原理：npm会将本地node_modules/.bin临时加入PATH）
- (3) 显式指定相对路径执行：./node_modules/.bin/webpack

1.3 【项目规范建议方案】

推荐做法：所有项目均应在本地安装特定版本
操作步骤：
1. 项目根目录执行：npm install webpack webpack-cli --save-dev
2. 在package.json的scripts中配置：
```
"scripts": {"build": "webpack --config webpack.config.js"
}
```
3. 通过npm run build触发构建
优势：确保团队成员和部署环境都使用完全一致的webpack版本，规避全局版本差异引发的构建问题

1.4 【主动验证方式】

通过which或where命令精确定位实际调用的webpack：

# Mac/Linux
which webpack# Windows
where webpack

若输出路径包含node_modules则为本地版本，包含npm全局目录则为全局版本

若where webpack有误，渴直接运行命令查看版本

# 查看当前调用的版本
webpack --version

逻辑判断：
- 若版本号与项目的 package.json 中的 webpack 版本一致 → 本地版本被正确调用
- 若版本号与全局安装的 webpack -g 版本一致 → 使用了全局版本

1.5 异常场景说明：

若同时存在全局和本地安装时出现版本冲突，建议：

删除全局安装：npm uninstall -g webpack webpack-cli
强制限制本地调用（推荐通过npx或npm scripts）
使用版本锁：在package.json中指定"webpack": "^5.76.0"等固定版本号

通过这种结构化控制，能有效避免日常开发中70%以上的构建环境相关故障。

2 补充：package.json的scripts

参考https://blog.csdn.net/Triumph_light/article/details/135636652?spm=1001.2014.3001.5506

2.1 什么是npm script

在package.json里面定义的scripts字段就是，它的每一个属性都对于一段脚本。

{// ..."scripts": {"build": "node build.js"}
}

其中build命令对应的脚本就是node build.js，使用npm run命令，就可以执行。

$ npm run build

等同于执行

$ node build.js

2.2 npm run的原理

我们在项目当中运行npm run xxx，主要分为以下几步：
1. 从package.json当中读取scrips对象。
2. 以传给npm run命令的第一个参数作为键，在scripts对象当中找到对应的值作为接下来要执行的命令，没有找到会报错。
3. 执行npm run，就会立马自动创建一个shell，其中只要是shell可以运行的命令，就可以写在npm script当中。
4. 将当前目录下的node_modules/.bin这个子目录加入PATH变量（这就意味着，当前目录的node_modules/.bin子目录里的所有脚本，都可以直接用脚本名调用，而不需要加路径）

"test": "mocha test"
// 而不用写成这样
"test": "./node_modules/.bin/mocha test"

在这个shell上执行上述命令

npm 脚本的唯一要求就是可以在 Shell 执行，因此它不一定是 Node 脚本，任何可执行文件都可以写在里面。 npm 脚本的退出码，也遵守 Shell 脚本规则。如果退出码不是0，npm 就认为这个脚本执行失败。

3 补充：npm安装命令

3.1 `npm install webpack`、`npm install webpack --save-dev` 和 `npm install webpack -g`

3.1.1 对比

命令	安装位置	作用域	适用场景
`npm install webpack -g`	全局目录（如 `/usr/local/bin` 或 `%APPDATA%\npm`）	所有项目可用	1. 不推荐，易导致版本冲突；2. 不会修改任何项目的 `package.json` ；3. 其他开发者或部署环境无法自动获取此依赖（需手动安装）
`npm install webpack`	项目内 `node_modules`	仅当前项目	默认写入 `dependencies`（1. ×，Webpack 应归类为开发依赖；2. 这样在项目发布时会将 Webpack 打包到生产环境（无意义且增大体积）)
`npm install webpack --save-dev`	项目内 `node_modules`	仅当前项目	1. 推荐，归类到 `devDependencies`(构建工具应在此类，`npm install --production` 时自动排除开发依赖devDependencies，精简生产环境)

npm install # 同时安装 dependencies + devDependencies

3.1.2 安装位置决策树

是否要在任何目录直接运行命令？ → 是 → ❌ 依然不要全局安装，改用 npx webpack
是否要与其他开发者共享配置？ → 是 → ✅ 必须 --save-dev + 提交 package.json
是否要部署到服务器？ → 是 → ✅ 本地安装 + devDependencies 确保环境一致

3.2 --save和–save-dev区别

3.2.1 `--save`

作用：将安装的包信息写入 package.json 的 dependencies 字段。
本质：
用于标记 生产环境依赖（应用运行时必须的依赖包）。
典型依赖：
- 框架库：如 react, vue, lodash
- 工具运行时：如 axios, moment
- 业务核心依赖：如 redux, express

3.2.2 `--save-dev`（`--dev` 的完整写法）

作用：将包信息写入 package.json 的 devDependencies 字段。
本质：
用于标记 开发环境依赖（仅在开发、构建或测试阶段需要的工具）。
典型依赖：
- 构建工具：如 webpack, vite, babel
- 测试框架：如 jest, mocha
- 代码检查工具：如 eslint, prettier
- 类型定义：如 @types/node

3.3 --save和无–save的区别

npm>=5的版本，完全相同。

命令	npm ≥5 的行为（2017年后）	npm ≤4 的行为（已淘汰）	对 `package.json` 的影响
`npm install xxx`	自动将包写入 `dependencies`	不保存到任何依赖字段	现代版本：✅ 更新 `dependencies`
`npm install xxx --save`	完全等同于 `npm install xxx`	强制写入 `dependencies`	旧版中必须加此参数才能保存