webpack的介绍和安装以及在安装是遇到问题的解决方案

什么是webpack?
从本质上讲，webpack是一个现代的JavaScript应用的静态模块打包工具。
webpack其中一个核心就是让我们可以进行模块化开发，并且会帮助我们处理模块间的依赖关系。

webpack和grunt/gulp的对比

grunt和gulp的核心是Task任务
我们可以配置一系列的task（任务流），并且定义task要处理的事物（例如ES6、ts转化、图片压缩、scss转成css）
之后让grunt、gulp来依次执行这些task，而且让整个流程自动化
所以grunt/gulp也被称为前端自动化任务管理工具

什么时候用grunt/gulp呢?

如果你的工程模块依赖非常简单，甚至是没有用到模块化的概念
只需要进行简单的合并、压缩、ES6转ES5，就使用grunt/gulp即可
但是如果整个项目使用了模块化管理，而且相互依赖非常强，我们就可以使用更强大的webpack了。

grunp/gulp更加强调的是前端流程的自动化，模块化不是它的核心
webpack更加强调模块开发管理，而文件压缩合并、预处理等功能，是它附带的功能

webpack为了可以正常运行，必须依赖node环境，node环境里面有一个工具npm,node环境为了可以正常的执行很多代码，必须包含各种依赖的包
npm工具(node packages manager)

安装webpack

安装webpack首先需要安装Node.js, Node.js自带软件包管理工具npm.
查看自己的node版本：

node -v

全局安装webpack（这里我安装的是版本号3.6.0，因为vue cli2依赖该版本）

npm install webpack@3.6.0 -g

局部安装webpacka(是后续才需要的)

--save-dev' 是开发时依赖，项目打包后不需要继续使用的
cd 对应目录
npm install webpack@3.6.0 --save-dev

为什么全局安装后，还需要局部安装呢？
1.在终端直接执行webpack命令，使用的全局安装的webpack
2.当在package.json中定义了scripts时，其中包含了wenpack命令，那么使用的是局部webpack

‘webpack’ 不是内部或外部命令解决办法以及npm配置

今天在笔记本上安装webpack，按照教程下来，使用webpack命令行，报错：‘webpack’ 不是内部或外部命令,也不是可运行的程序 或批处理文件。网上有大量的配置方法与解决办法，找了好久才成功解决，但是我发现依然解决不了我的问题，知道突然看到一篇跟比尔写的不太一样的博客，才解决了我的难题，我今天真的是安装了一天，太难了！！！接下来我整理一下我的安装思路：

一、下载安装node.js(npm)

我下载的是官网最新版的nodejs

按照步骤直接点击下一步完成安装，nodejs默认集成了npm，无需再次安装。

在下面的页面中我们一般选择“ Add to PATH ”选这个然后next，因为他会自动给我们配置环境。

二 、配置环境

win+R输入cmd打开命令行 输入 node -v 回车查看nodejs是否成功安装：

输入npm -v 也可以查看npm是否成功安装，安装成功后出现版本号说明nodejs.npm安装成功。

1.配置文件夹

我的nodejs是默认安装路径C:\Program Files\nodejs，最开始是安装在其他盘的，但是配置的时候各种问题，后重装改为默认路径

在C:\Program Files\nodejs文件夹内新建两个文件夹用于全局存放依赖包路径，和缓存路径

缓存C:\Program Files\nodejs\node_cache

存放C:\Program Files\nodejs\node_global

文件夹创建完成后打开命令行输入如下命令 配置路径：

npm config set cache “C:\Program Files\nodejs\node_cache”

回车

输入：
npm config set prefix “C:\Program Files\nodejs\node_global” 回车

（输入指令后，命令行闪一下，不会有任何提示）

2.安装webpack

webpack分为全局安装，与项目安装（安装在你指定的文件夹内），我这里使用的是全局安装，并且我安装的版本是3.6.0

启动cmd，键入如下的命令：

npm install webpack@3.6.0 -g

点击回车，会有一个进度条，等待进度条完成后，出现如下信息(具体信息可能有差别，但是只要不出现error说明安装成功)：
你可以在这个路径C:\Program Files\nodejs下的node_globa文件中查看是否有东西，如果有你就安装好了，但是这个时候你在cmd命令提示符框中输入webpack -v ，有可能会有“ webpack’ 不是内部或外部命令的问题 ”，即使这样依旧继续执行下面的步骤：
此时，打开nodejs的路径C:\Program Files\nodejs\node_global文件夹，发现多了一些东西：
此时全局webpack已经成功安装。

3.环境变量配置

我的电脑——右键属性——高级系统设置——高级———环境变量

分别新建用户变量PATH和系统变量NODE_PATH
用户变量：
系统变量：
这是最重要的一点;在安装webpack后出现’webpack’ 不是内部或外部命令的问题 就是此处设置不对

PATH和NODE_PATH全部设置为：C:\Program Files\nodejs\node_global。

看到网上的设置方法为 ：NODE_PATH属性指向C:\Program Files\nodejs\node_global\node_modules,这样设置并不对，就会导致报不是内部命令

按照以上步骤nodejs npm webpack算是真正安装配置完，然后就可以直接使用了