第一节、认识webPack

现在的前端网页功能丰富，特别是SPA（single page web application 单页应用）技术流行后，JavaScript的复杂度增加和需要一大堆依赖包，还需要解决SCSS，Less……新增样式的扩展写法的编译工作。所以现代化的前端已经完全依赖于WebPack的辅助了。

现在流行的三大框架，和webpack已经紧密联系在一起；

• React.js+WebPack
• Vue.js+WebPack
• AngluarJS+WebPack

什么是WebPack？

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Sass，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。在3.0出现后，Webpack还肩负起了优化项目的责任。
这段话有三个重点：

• 打包：可以把多个Javascript文件打包成一个文件，减少服务器压力和下载带宽。

• 转换：把拓展语言转换成为普通的JavaScript，让浏览器顺利运行。

• 优化：前端变的越来越复杂后，性能也会遇到问题，而WebPack也开始肩负起了优化和提升性能的责任。

我们可以从下图再次了解一下WebPack的作用:
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Sass，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。在3.0出现后，Webpack还肩负起了优化项目的责任。
这段话有三个重点：

• 打包：可以把多个Javascript文件打包成一个文件，减少服务器压力和下载带宽。

• 转换：把拓展语言转换成为普通的JavaScript，让浏览器顺利运行。

• 优化：前端变的越来越复杂后，性能也会遇到问题，而WebPack也开始肩负起了优化和提升性能的责任。

我们可以从下图再次了解一下WebPack的作用:

安装WebPack

看了这么久，一定着急动手作一作了。要使用WebPack就要先进行安装，就和你要使用微信，必须在手机上下载微信的APP一样，但是不同的是WebPack的安装，采用的是命令行npm形式的安装。
这里我以windows系统为例，给大家做截图示范。苹果安装稍有不同，不过大同小异。

具体安装方法：
用win+R打开运行对话框，输入cmd进入命令行模式。然后找到你想开始项目的地方，输入下方代码：

1 2	mkdir webpack_demo cd webpack_demo

第一句是建立一个文件夹，第二句是进入这个文件夹。这个文件夹就是我们的项目文件目录了，文件夹建立好后，可以通过下面命令安装WebPack。
需要注意的是,你在执行下一步时必须安装node，可以通过 node -v来查看node安装情况和版本，如果没有安装，要先安装node才可以继续进行。

1 2	//全局安装 npm install -g webpack

如果你这时安装失败了（出现了报错信息），一般有三种可能：

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

注意：全局安装是可以的，但是webpack官方是不推荐的。这会将您项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中，可能会导致构建失败。

对项目目录进行安装

全局安装完成后，我们还要进行一个项目目录的安装。在用npm安装前，我们先要进行一下初始化，初始化的主要目的是生成package.json文件（这是一个标准的npm说明文件，里面蕴含了丰富的信息，包括当前项目的依赖模块，自定义的脚本任务等等，如果你对此文件还不了解，可以看看node 的相关知识）。

在命令行输入：

1

npm init

输入完成后，npm终端会问你关于项目的名称，描述……一堆内容，如果你不考虑发布到npm上，这些内容都不重要，而且我们后期还可以用文本的形式修改这些内容。现在我们只要一路回车就完成了初始化。这时用dir命令已经可以看到生成的package.json文件了。

输入下面命令进行项目目录的安装：

1	npm install --save-dev webpack

这里的参数–save是要保存到package.json中，dev是在开发时使用这个包，而生产环境中不使用。

开发环境and生产环境：

• 开发环境：在开发时需要的环境，这里指在开发时需要依赖的包。
• 生产环境：程序开发完成，开始运行后的环境，这里指要使项目运行，所需要的依赖包。

查看webpack版本

你安装好后，会想知道你现在webpack版本，在工作中交流时，也会经常问到你，你的打包版本是什么？这时候我们可以用下面的命令进行查看。

1	webpack -v

可以看到我现在的版本的3.6.0版本，这是目前（2017/9/16）最新的版本了。出现了版本号，也说明你的webpack安装成功了。

讲了那么多，最后来总结一下：

1. 对于一个什么都不会的人来说，首先你要了解node.js和npm，这是基础，最起码知道怎么用npm来安装相关需要。

1. 全局安装 WebPack （即npm insall -g webpack）。

1. 在相应项目文件下建立webpack（这里默认已经建立了项目文件夹并使用cmd管理员指令（windows系统下）进入到该文件）: 

1. a，输入指令 npm  init（按照步骤填写相应项目信息）来创建package.json文件，这是你以后项目的很重的一个文件。        

1. b，输入npm  install  webpack  --save-dev  在项目目录下安装webpack

1. 上述步骤完成后，webpack算安装成功了，你可以用  webpack -v查看是否有版本号，出现版本号即代表安装成功