webpack源码阅读——npm脚本运行webpack与命令行输入webpack的区别

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

webpack安装

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

全局安装

npm install webpack -g

本地安装

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的全局安装目录？ 输入以下命令：

npm root -g

以windows为例，笔者的路径是：

C:\Users\（登录用户名）\AppData\Roaming\npm\node_modules

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

webpack.cmd

@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

...
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

@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的开始有以下代码

// 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。