一、Webpack是什么、为什么要使用它
简单来说，Webpack是一个打包工具。
站在2018年的角度，成为一个优秀的前端工程师，除了要会写页面样式和动态效果之外，还需要会用主流的单页面框架、Node.js、简单的前端的性能优化等等。加上现在一部分服务器的逻辑移到了前端上，所以实际上前端的复杂度也是提升了很多。
而Webpack可以帮助我们完成一些任务。比如js压缩、css压缩、编译模板文件等等，从而减少前端的工作量。当然，Webpack功能很强大，能帮我们完成的工作远远不止这些。
下面，让我们慢慢了解Webpack吧~
二、安装
① Webpack的运行需要依赖Node.js，因此需要先安装Node.js。
中文网下载地址：下载 | Node.js 中文网
安装完成之后在命令行窗口输入下面两行命令，若有出现版本号则安装成功。
$ ② 接着就可以通过npm（一个基于Node.js的包管理工具）来安装Webpack咯~
首先，通过下面的一行命令先生成package.json
$ npm init③ 接着就能通过npm完成webpack的安装啦
因为npm的源在国外，所以安装速度可能比较慢。建议大家可以用淘宝的npm镜像。但是要注意的一点是，淘宝npm镜像中有一些包会不太一样（一般来说不影响使用）
淘宝 NPM 官网：淘宝 NPM 镜像
通过下面这行代码即可完成cnpm的配置
$ 通过下面两行代码即可完成webpack的安装
// 要是不想使用淘宝的npm镜像，就用npm代替cnpm
$ cnpm install -D webpack
$ cnpm install -D webpack-cli④ 安装完之后在package.json同级目录新建一个webpack.config.js文件。然后再在package.json中增加一个“scripts”配置项。
// 接着在命令行中输入下面的这行代码就可以启动webpack啦。
$ npm run build但是，因为我们的webpack.config.js是空的，因此运行时会报错。具体配置会在下一节课开始讲。
三、一些必要的解释
到这里为止，大家可能会有几个问题。
Q1：命令行窗口怎么打开？
A1：windows系统在左下角的搜索框输入cmd即可
Q2：package.json中的scripts有什么用？
A2：如上面的实例，当我们输入“npm run build”就相当于是通过npm脚本执行了“webpack --config webpack.config.js”。
那为什么我们不直接在命令行中输入后面的那行代码呢？因为上面的实例代码中，webpack是局部安装的，因此在环境变量中不能找到webpack，直接输入那行代码会提示找不到webpack。
那为什么npm的script就能运行呢？我们通过npm安装的包都会放在node_modules的目录中，而这个目录中有一个叫.bin的子目录，在这个目录中放置有webpack的可执行文件。npm的script默认会去.bin中寻找，因此能够运行。
这个问题也能通过全局安装解决，-g表示全局安装。
$ cnpm install -g webpack
$ cnpm install -g webpack-cliQ3：为什么推荐使用局部安装？
A3：我们写完的代码可能会给其他人用，而我们不能保证其他人也全局安装了webpack，因此局部安装webpack比较保险。
