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