1. Webpack 是一种前端模块化打包工具。
    2. 模块化是一种将系统分离成独立功能部分的方法，严格定义模块接口、模块间具有透明性。

    独立功能：假设有 a.js b.js c.js 三个文件，a b c 三个文件的功能都是比较单一且独立需要相互配合的
    模块接口：a b c 三个文件各自暴露出一个借口，三个文件通过这个接口相互调用
    透明性：三个模块之前相互传递什么参数都是透明的

    1. 模块化历史
    1. 无模块时代
      360截图20171122130521487.jpg
    1. 模块萌芽时代
      360截图20171122130759740.jpg
    1. 现代模块
      image.png
      360截图20171122131001428.jpg

    参考链接：https://www.zhihu.com/question/20351507 知乎 -> AMD 和 CMD 的区别有哪些？
    360截图20171122131543914.jpg

    image.png

    1. 为什么要用模块化呢？

    “高内聚，低耦合” -> 《软件工程》

    1. 为什么要用 Webpack？

    360截图20171122131908257.jpg
    与当前较主流的模块有较高的契合度
    Webpack 编译后的文件能够生成对应的 setmap，例如：有一个 a.js 和 b.js 编译后成为 c.js 这时系统可以告诉你这个编译后的 c.js 到哪里去了，然后再动态地帮助我们 找到 这个文件的地址，还可以用 c.js 文件去替换掉 a.js 或者 b.js
    360截图20171122132342880.jpg

    1. 官网上阐述的优点

    image.png

    1. 安装方法

    先在项目中建 配置文件
    image.png
    然后再在项目中装包
    image.png

    1. 简单的工作原理
      首先编辑了 cats.js 文件，在 app.js 文件中引用，webpack 会自动解析这个 require 过来的文件，并将其压缩打包

    image.png
    项目结构
    image.png

    1. 对于 webpack 来讲，主要有以下五大非常重要的东西

    image.png

    1. 所有的入口资源会按照入口资源来分析所有的 require ，然后把这些 require 按照你的形式最终再生成到对应的地方去
    2. 就是你这个东西想把我的东西编译到哪里去
    3. 所有的资源管理