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中配置）
  • 本地安装路径：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 异常场景说明：

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

1. 删除全局安装：npm uninstall -g webpack webpack-cli
2. 强制限制本地调用（推荐通过npx或npm scripts）
3. 使用版本锁：在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"

5. 在这个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	旧版中必须加此参数才能保存