webpack+vite前端构建工具 -答疑
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中配置）
- 补充：如果已经全局安装了 Webpack，则可以简单地运行命令——
- 本地安装路径：
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) 通过
1.3 【项目规范建议方案】
- 推荐做法：所有项目均应在本地安装特定版本
- 操作步骤：
- 项目根目录执行：
npm install webpack webpack-cli --save-dev - 在
package.json的scripts中配置："scripts": {"build": "webpack --config webpack.config.js" } - 通过
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，主要分为以下几步：
- 从package.json当中读取scrips对象。
- 以传给npm run命令的第一个参数作为键，在scripts对象当中找到对应的值作为接下来要执行的命令，没有找到会报错。
- 执行npm run，就会立马自动创建一个shell，其中只要是shell可以运行的命令，就可以写在npm script当中。
- 将当前目录下的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 | 旧版中必须加此参数才能保存 |