webpack-安装踩坑

前提：安装了 Node.js

Tips:

• webpack可以全局安装或者本地安装。官网上不推荐全局安装，因为这会将你项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中，可能会导致构建失败。
• 全局和局部都安装webpack,这样命令行内直接使用webpack命令，使用的是全局的，npm运行的是局部的webpack
• 全局安装是为了可以在命令行中使用webpack，项目安装是为了让项目发布后，其他人可以在直接使用npm命令时使用与你相同版本的webpack。

全局安装webpack

$ npm install -g webpack

全局安装的包都在 /usr/local/lib/node_modules 文件夹下(OS X)。安装后可执行文件默认放在/usr/local/bin，库文件默认放在/usr/local/lib，配置文件默认放在/usr/local/etc。bin目录一般存编译好的dll库文件和可执行文件，bin是二进制binrary的英文缩写。(查看bin目录下是各种软链接，git，npm等)

安装失败

一般有三种可能：

• 检查你node的版本号，如果版本号过低，升级为最新版本。
• 网络问题，可以考虑使用cnpm来安装（淘宝实时更新的镜像）,具体可以登录cnpm的官方网站学习。
• 权限问题，在Linux、Mac安装是需要权限，如果你是Windows系统，主要要使用以管理员方式安装。

安装成功，运行失败

可能是环境变量配置的原因，尝试的解决方式和结果：

• 直接在终端下，设置环境变量export NODE_PATH="/usr/local/lib/node_modules"， 后在项目根目录运行webpack，仍然报错。在项目根目录下输入指令 echo $NODE_PATH 输出结果为空。
• 在项目根目录下设置环境变量export NODE_PATH="/usr/local/lib/node_modules" 后在项目根目录运行webpack，成功！在项目根目录下输入指令 echo $NODE_PATH 能输出结果。
  但是当新开一个终端进入项目，并在项目根目录下运行webpack指令，仍然报错，输入指令 echo $NODE_PATH 输出结果为空。说明之前设置的环境变量只是一个临时的值！
• 在~/.bash_profile中添加如下设置：export NODE_PATH="/usr/local/lib/node_modules",保存退出。
  运行webpack,成功！输入指令 echo $NODE_PATH 能输出结果！

局部安装webpack

$ npm install webpack --save-dev

Tips：

1. 局部 npm install 安装包之前，需要在当前目录下执行初始化。也就是说当前目录必须有package.json文件，或者你在当前的目录下人为的建立好node_modules目录。

   • 项目中只有package.json，文件内容不能为空，不能为null,至少应该包含一个{},会如期望安装，安装完成后会生成node_modules文件夹，package.json中新增devDependencies。
   • 项目中只有node_modules文件夹，可以正常下载到文件夹中,不会生成package.json,可能会生成package-lock.json(取决于npm版本)。再初始化的时候，webpack及版本号默认添加在dependencies，而不是devDependencies。
   • 两者都没有，npm会一直向上寻找package.json或者node_modules文件夹所在目录，最终终止在用户根目录。
2. 如果你使用的是 npm 5，你可能还会在目录中看到一个 package-lock.json 文件(可以理解为npm5以上，有包下载到node_modules，就会生成package-lock.json)。
3. package.json中的name属性不能为“webpack”
4. 本地安装 webpack 后,我们也并不能在命令行中使用 webpack 命令。因为环境变量中没有对应的路径,提示：webpack command is not found.
5. 如果不带参数或者带--save，会在dependencies这里。卸载的时候清空dependencies。--save-dev在"devDependencies"，卸载清空devDependencies。卸载不用带参数。

那么，我们应该如何使用局部webpack命令呢？

1. 利用package.json设置中的scripts属性。定义在package.json里面的脚本，称为 npm 脚本
在 npm scripts 中我们可以通过包名直接引用本地安装的 npm 包的二进制版本，而无需编写包的整个路径。

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "lwebpack": "webpack"
}

在命令行下，$ npm run，然后回车，就会显示所有可以使用的命令。npm run 是npm run-script的缩略。
start、test、stop和restart这样的特殊脚本可以直接执行，npm [xx]， 其它的脚本任务需要用npm run xx来执行。
通过向 npm run [命令]和参数之间添加两组两个中横线，可以将自定义参数传递给 npm 脚本，例如：npm run lwebpack -- --v。

npm 脚本原理

1.每当执行npm run，就会自动新建一个 Shell，在这个 Shell 里面执行指定的scripts脚本命令。因此，只要是 Shell（一般是 Bash）可以运行的命令，就可以写在 npm 脚本里面。

2.比较特别的是，npm run新建的这个 Shell，执行scripts的时候，会将当前目录的node_modules/.bin子目录加入PATH变量，执行结束后，再将PATH变量恢复原样。

3.这意味着，当前目录的node_modules/.bin子目录里面的所有脚本，在scripts中都可以直接用脚本名，而不必加上路径。比如，当前项目的依赖里面有 Mocha，只要直接写mocha test就可以了。

"test": "./node_modules/.bin/mocha test"
//可以简写为
"test": "mocha test"

由于 npm 脚本的唯一要求就是可以在 Shell 执行，因此它不一定是 Node 脚本，任何可执行文件都可以写在里面。

2. 自定义shell命令来操作

$ alias lwebpack="node_modules/.bin/webpack" 或,
$ alias lwebpack =PATH=$(npm bin):$PATH

3. 可以运行在初始安装的 webpack 包中的 webpack 二进制文件（./node_modules/.bin/webpack）。直接在cli里运行：

$ node_modules/.bin/webpack -v
$ node_modules/webpack/bin/webpack.js -v

本地安装 webpack 后，node_modules中会生成一个.bin文件夹，可以发现里面有webpack相关的几个文件。这里的 webpack 是 node_modules/webpack/bin 这个包里面 webpack.js可执行文件 的软链接 。直接在.bin 目录下使用./webpack -v,或者在bin目录下使用./webpack.js -v，需要加[ . / ], 外层则可加，可不加。
 
注意:当在 windows 中通过调用路径去调用 webpack 时，必须使用反斜线\
 

4. $ node ./node_modules/.bin/webpack -v 同理，执行 webpack 的可执行 js ，这样执行的好处是可以加一些 js 的标记变量 flag ，例如调大 old memory size 或者进行 chrome debug (暂时还没懂什么意思，不过这也是一种应用方法)
5. 还可以：

$ `npm bin`/webpack -v

6. npm 5.2.0以上，会安装一个新的包npx。npx是一个npm包执行器，旨在提高从npm注册表使用软件包的体验。

$ npx webpack -v

7. 新建一个index.js，内容如下：

const webpack = require('webpack');
webpack();

然后在cli里运行$ node index.js即可

 
8. 利用package.json的bin属性和npm link
网上查的时候有人提到了bin这个属性，这里，花了一些时间，终于好像弄清楚了。

package.json中bin：
很多包都有一个或多个可执行模块，希望用户安装包的同时，把这些可执行模块配置到PATH中，npm让这个工作变得十分简单（实际上npm本身也是通过bin属性安装为一个可执行命令的）
bin，是一个命令名和本地文件名的映射。在npm安装某个包(模块)时，会查找这个包中package.json文件是否包含bin属性，如果有，会为bin中配置的可执行文件创建一个软链接，名字是bin中的key值，安装方式不同，链接位置不同。如果是全局安装，链接会放到prefix/bin（对于windows系统，默认会在C:UsersusernameAppDataRoamingnpm目录下，OS X系统中在usr/local/bin，链接到usr/local/lib/node_modules/包下的对应文件），这使你可以直接在命令行执行key对应命令。如果是本地(局部)安装，则会在项目内的./node_modules/.bin/目录下创建一个软链接，指向node_modules/包下对应可执行文件。
如果你只有一个可执行文件，那么它的名字应该和包名相同，此时只需要提供这个文件路径(字符串)，如："bin": "./path/to/program"。
(实验：在demo中package.json中添加bin，执行npm install，不行，什么软链接都没有；内容都删除只留下package.json然后npm intall，也不行。如果想实验这个功能，可以实验性的安装自己本地的包，使用相对路径。如npm install ../project)

npm link ,  create a global symbolic link to the current folder.
如果package.json中没有bin，单独使用npm link：只在/usr/local/lib/node_modules/下生成了一个链接指向项目目录，链接的名字package.json中的name.
结合bin使用npm link：在/usr/local/lib/node_modules中新生成了一个软链接，（名字是package.json的name？还是项目名？经实验是name）指向项目文件夹。并且，在/usr/local/bin中新生成了一个软链接(bin中的key)，指向/usr/local/lib/node_modules/（name）/下bin指定的文件。
(两个不同版本webpack项目中，设置link同一个名字,(如果link4.0版本，哪里都4.0，如果link3.0，则有4.0的4.0，其他3.0. 设置的覆盖先设置的)

安装指定版本

$ npm install webpack@version

最新体验版本

如果你热衷于使用最新版本的 webpack，你可以使用以下命令，直接从 webpack 的仓库中安装：

$ npm install webpack@beta
$ npm install webpack/webpack#<tagname/branchname>

安装这些最新体验版本时要小心！它们可能仍然包含 bug，因此不应该用于生产环境。

卸载

$ npm uninstall webpack -g ,//没试
$ npm uninstall webpack