webpack 安装笔记：全局 vs 本地，以及一个 PATH 环境变量的坑

webpack 安装笔记：全局 vs 本地，以及一个 PATH 环境变量的坑

环境

• nodJS v10.15.0
• webpack v5.18.0

安装

全局安装：

cnpm install webpack -g

本地安装（官方推荐）：

npm install --save-dev webpack  # 最新版本 --save-dev指将包信息写入package.json
npm install --save-dev webpack@<version>   # 指定版本

webpack v4+版本，还需要安装CLI：

npm install --save-dev webpack-cli

最后package.json添加命令：

"scripts": {
  "build": "webpack --config prod.config.js"
}

这里提一下 全局安装 和 本地安装 的区别：

全局安装：会安装在系统环境中，可通过命令npm root -g查询安装路径。

• windows一般在'C:\Users\guzicheng\AppData\Roaming\npm'下。
• Linux一般在'/usr/local'下。

本地安装：安装在项目的node_modules文件夹下。

nodejs在调用模块时，默认会去项目下的node_modules文件夹下去寻找，如果全局安装后，在调用时需要手动解决路径，或者设置环境变量

• PATH设置为 node.exe 所在目录C:\Users\guzicheng\AppData\Roaming\npm

而且全局安装无法很好支持不同版本的包共存。所以一般推荐本地安装（不过两者并不冲突）。

后记

安装webpack4时，需要安装webpack-cli，但两个都安装完成后，运行命令webpack -v查看是否安装成功，遇到报错：

One CLI for webpack must be installed.

无论本地还是全局安装，这个错始终在。

结果发现windows环境变量下PATH出现了两个路径，一个在windows用户下，一个在我用户下。删除一个后，重启vscode（终端）即成功。

== 官方：想要运行本地安装的 webpack，你可以通过 node_modules/.bin/webpack 来访问它的二进制版本。 ==

如：node_modules/.bin/webpack -v