webpack是目前被大家广为使用的模块打包器。从命令行输入webpack或者在package.json的npm scripts中配置webpack脚本都可以使用webpack。虽然效果是一样的,但是两者有区别吗?最近在阅读源码的过程中发现了这个事情,原来两者是有区别的。

webpack安装

webpack的安装分为全局安装和本地安装。

全局安装

1
npm install webpack -g

本地安装

1
npm install webpack --save-dev

全局安装与本地安装的区别

  1. 安装时参数不同,全局安装需要添加 -g 参数
  2. 安装后生成的目录不同

    • 全局安装会在系统npm的根路径下生成node_modules目录,并在根路径下生成对应的.cmd 脚本文件用于启动webpack
    • 本地安装会在运行npm install 命令的目录下生成node_modules目录,并在node_modules 目录下生成.bin文件夹,里面存放了对应的.cmd脚本文件用于启动webpack
  3. 使用方式不同

    • 全局安装后可以直接在命令行输入webpack命令,使用webpack。否则在命令行输入webpack的情况下,会提示 command not found

命令行直接输入webpack的方式

这种方式使用webpack,必须全局安装webpack,在全局安装了webpack的情况下,命令行输入webpack并敲下回车时,系统会去npm全局根路径下寻找webpack.cmd命令(windows系统下),如何查看当前npm的全局安装目录? 输入以下命令:

1
npm root -g

以windows为例,笔者的路径是:

1
C:\Users\(登录用户名)\AppData\Roaming\npm\node_modules

其中node_modules下存放了全局安装的一些npm包,npm文件夹下还存在了对应的webpack.cmd文件用于启动webpack

webpack.cmd

1
2
3
4
5
6
7
@IF EXIST "%~dp0\node.exe" (
"%~dp0\node.exe" "%~dp0\node_modules\webpack\bin\webpack.js" %*
) ELSE (
@SETLOCAL
@SET PATHEXT=%PATHEXT:;.JS;=;%
node "%~dp0\node_modules\webpack\bin\webpack.js" %*
)

这段脚本的意思就是使用当前目录下的node去运行node_modules/webpack/bin/webpack.js,如果当前目录不存在node.exe则使用全局的node去运行。

npm scripts配置npm脚本运行webpack的方式

如下所示

package.json

1
2
3
4
5
...
scripts: {
"build": "webpack"
}
...

在package.json中定义了启动webpack的npm脚本,使用npm run build命令即可使用webpack进行构建。

关于执行npm run ***的原理可以参考阮老的教程npm scripts使用指南中的原理部分。

执行npm run build时, 会执行webpack命令,此时系统去当前目录而非全局npm目录寻找webpack.cmd文件并执行。其中webpack.cmd文件中定义了需要执行的webpack的目录,也就是在当前目录下寻找webpack/bin/webpack.js。如下:

webpack.cmd

1
2
3
4
5
6
7
@IF EXIST "%~dp0\node.exe" (
"%~dp0\node.exe" "%~dp0\..\webpack\bin\webpack.js" %*
) ELSE (
@SETLOCAL
@SET PATHEXT=%PATHEXT:;.JS;=;%
node "%~dp0\..\webpack\bin\webpack.js" %*
)

全局版本和本地版本都安装的情况下,使用的究竟是全局的webpack还是本地的webpack

如题,我们还是从两种方式使用webpack的情况下进行分析。

前提:全局以及本地都安装了webpack

命令行直接输入webpack的方式

这种方式运行的是全局的node_modules/webpack/bin/webpack.js,其中在webpack.js的开始有以下代码

1
2
3
4
5
6
7
// Local version replace global one
try {
var localWebpack = require.resolve(path.join(process.cwd(), "node_modules", "webpack", "bin", "webpack.js"));
if(__filename !== localWebpack) {
return require(localWebpack);
}
} catch(e) {}

这段代码判断了当前的文件路径与node进程运行时所在的路径下的node_modules/webpack/bin/webpack.js 是否相等,如果相等代表目前使用的就是本地的版本,如果不相等代表了当前使用的是全局版本,则直接请求本地版本。

结论:在全局安装以及本地都安装的情况下命令行中输入webpack,在webpack的源码逻辑中控制了直接使用本地安装的webpack。

npm 脚本中配置webpack命令

这种方式直接去本地node_modules/.bin去找webpack.cmd命令,然后运行本地node_modules下的webpack。

结论:在全局安装以及本地都安装的情况下,使用npm脚本的方式运行webpack,则直接运行的是本地版本。

总结:在全局以及本地都安装了webpack的情况下,运行时本地安装的webpack。