这是我参与「第四届青训营 」笔记创作活动的第四天
什么是Webpack
Webpack 是一种用于构建 JavaScript 应用程序的静态模块打包器，它能够以一种相对一致且开放的处理方式，加载应用中的所有资源文件（图片、CSS、视频、字体文件等），并将其合并打包成浏览器兼容的 Web 资源文件。
注意，上面说的“一致且开放”的加载模型，这在当时算的上是非常 Breaking Change 的设计！
Webpack 设计优点：
- 所有资源都是 Module，所以可以用同一套代码实现诸多特性，包括：代码压缩、Hot Module Replacement、缓存等；
- 打包时，资源与资源之间非常容易实现信息互换，例如可以轻易在 HTML 插入 Base64 格式的图片；
- 借助 Loader，Webpack 几乎可以用任意方式处理任意类型的资源，例如可以用 Less、Stylus、Sass 等预编译 CSS 代码。
甚至在 Webpack 之后出现的许多新打包工具，例如 Rollup、Parcel、Snowpack 等，都或多或少受这种设计影响。
其次，Webpack 极强的开放性，也让它得以成为前端工程化环境的 基座，我们可以围绕 Webpack 轻易接入一系列工程化工具，例如 TypeScript、CoffeScript、Babel 一类的 JavaScript 编译工具；或者 Less、Sass、Stylus、PostCSS 等 CSS 预处理器；或者 Jest、Karma 等测试框架，等等。
如何高效学习 Webpack？
- 上手实践各种场景下的构建配置方法，捋清楚最基本的使用规则。 通过各种应用场景摸清使用规律，结构化地理解各基础配置项与常见组件的用法。
- 初步理解底层构建流程，学会分析性能卡点并据此做出正确性能优化。 关键在于掌握分析方法，理解底层机制，做到融会贯通，举一反三。
- 深入 Webpack 扩展规则，理解 Loader 与 Plugin 能做什么，怎么做。
- 深挖源码，理解 Webpack 底层工作原理，加强应用与扩展能力。
