就在昨天，我们聆听了“模块化”家族的故事，它们是一个简单而纯粹的家族，没有太多的纠纷问题，大家各司其职。今天，小编为大家请来了另一位大师--Webpack，人们对它的封号是：“前端模块化打包工具”。

image.png

一、Webpack 的前尘往事

1.定义：Webpack是JavaSctipt应用的静态模块化打包工具

问：Webpack先生你好，向大家打个招呼吧。然后再简单介绍一下你自己O(∩_∩)O~
答：大家好，很高兴能在这里和大家见面。我叫Webpack，目前主要在前端行业为模块化兄弟们打包装，所以大家叫我“前端模块化打包工具”

2.没有Webpack的问题

  在ES6之前的模块化，必须借助其他的工具才能进行模块化开发，而且模块和模块之间的依赖性很高。意思是一个文件a，可能会被很多很多个文件导入a中的数据。

3.Webpack的作用

  ① 模块化开发：Webpack为模块化提供底层的支撑，从而可以进行模块化开发，并且会处理好模块间的依赖关系，处理好依赖关系后就会生成一种容易被浏览器识别的js代码。此外，Webpack除了能对js文件进行模块化开发，对CSS、图片、json文件也可以进行模块化开发
  ② 打包：将各种资源打包合并成一个或者多个包（Bundle），此外在打包的过程中能对资源进行管理。比如：压缩图片、将SCSS转换成CSS。

问：我听说您是打包工具的大王，所以对您的封号很好奇，趁着今天有机会，能否为我们大家讲一下这个封号的来历呢？
答：好的，主持人。首先我想讲讲封号中的为什么会有“模块”二字。
大家前几天应该刚听过“模块化”一族的故事吧，它的四个兄弟业务能力不强，需要别人的帮助才能把工作干好。而且老是喜欢依赖别人，所以我大部分的工作是帮助他们提高工作能力，并且医治好他们依赖别人的坏毛病，这是我封号中“模块”二字的由来。后来越来越多人的喜欢到我这来工作，为了让大家都能找得到适合自己的岗位，我要了解每个人的特征然后将它们分配到合适他们的岗位，这很像打包的工作，所以它们就叫我“前端模块打包工具”

image.png

4 Webpack 和grunt、gulp 的区别以及适用场景

① 本质上的区别：
  grunt、gulp：核心是task，我们可以配置一系列的task并且定义task要处理的事务（比如图片压缩、ES6转换）之后让grunt、gulp依次执行这些task而且让整个流程自动化，所以grunt、gulp也被称为“前端自动化任务管理工具”
  Webpack：核心是模块化打包，为模块化开发提供底层的支撑并且处理模块化之前的依赖关系，所以被称为“前端模块化打包工具”
② 应用场景
  grunt、gulp：工程模块简单，甚至没有用到模块化的概念；只需要进行简单的合并、压缩。
  Webpack：使用模块管理并且相互依赖很强；文件压缩合并、预处理功能只是附带的功能。
  总结成一句话：grunt、gulp 强调前端流程的自动化，核心是task；Webpack强调模块化管理，核心是模块化、打包

问：我听说前不久 grunt、gulp两位商业大咖和你竞争资源，有这么回事嘛？
答：不存在的，虽然我们都是作为前端行业的打包工具，但是服务的方式不一样。grunt、gulp他们喜欢为task小弟分配很多的事并且要求task小弟要依次完成这些事物，所以它们主要做前端自动化任务管理的工作。而且我们的工作环境也不一样，grunt、gulp喜欢在一些简单、低压的环境工作，我主要在高压环境下工作。

二、Webpack 安装

1.Webpack运行环境：

  在了解Webpack运行环境之前，我们先要知道js、CSS、json文件的模块化开发是不能直接部署到服务器上面的，必须借助Webpack，Webpack会将上述的文件转换成浏览器容易识别的代码，然后部署到服务器中，具体过程见下图：

Webpack运行环境.png

问：我听说您不是白手起家的，您还有一位在背后默默支持你的贤妻Node，可否为我们讲述一下你们之间的故事？
答：确实，每个成功男人的背后都有一个女人。我的成功离不开Node小姐的大力支持，如果没有她的支持，我根本不可能在前端行业混得这么好。我的Node小姐是一位德才兼备的贤妻，上得了厨房下得了厅堂，这一切都要归功于她的父亲--npm先生。

2.安装步骤【前提是安装了Node】

① 检查npm 版本是否符合：npm的版本需要大于 8.9 。因为后期用很多东西，版本是不能低于8.9的。
② 安装 Webpack: 在命令窗口输入命令 npm install webpack@3.6.0 -g 即可。版本选择3.6.0是因为Vue cli2.0 需要依赖Webpack的3.6.0的版本；参数 -g 代表全局变量，意味着在很多个终端都可以运行。
③ 检测安装是否成功： 在命令窗口中输入 webpack -v 。没有报错说明成功了。

  以上就是小编今天为大家分享的知识，大概介绍了Webpakc的情况然后就是如何安装Webpack。如果还有读者不会安装Node，可以查看小编往期的文章
Vue的三种安装方法（https://www.jianshu.com/p/b6c339659c89），里面就包含了Node的安装方法。谢谢大家的支持，希望这个采访的形式能得到你们的赞，哈哈，比心唷ღ( ´･ᴗ･` )比心❤❤❤