Webpack, 请开始你的表演

Posted 2021-04-29 九号

这是一篇 Webpack 入门文章，之所以写这篇文章，原因有二：

1. 工作和学习中一直在用，但是总有一些内容理解的不够；
   

2. 自己目前检索到的有关 Webpack 的文章，不能让我对该打包工具有个清晰的认知.

我主要的参考来源是 Webpack 3.10.0 版本的文档。

本文假设读者拥有 javascript 基础，已有大概了解或者使用过 Webpack，并想深入学习 Webpack。

对于学习任何新的工具，会用总是简单的，毕竟网络上有诸多的示例或者开源，但是当想要深入学习的时候，基础是每个人都绕不开的。

接下来，讲述的是 Webpack的基本概念，虽然并不能让你立即写出优美而有效的 Webpack 配置文件，但是对你更好的学习无疑是非常有帮助的。

module & dependency graph

由图可知，对于 Webpack 来说，一切皆模块。

相对于模块化编程中的 Javascript 模块，Webpack 扩展了模块的概念，将Javascript (包括可转化为 Javascript 的 TypeScript 等资源)、CSS (包括可转化为 CSS 的 Less/Sass 等资源)、图片以及字体资源等统统当作模块。

具体来说，通过以下声明方式引入的资源均被视为 Webpack 模块：

• ES2015 import

• Commonjs require

• AMD define & require

• CSS/Less/Sass 文件中使用的 @import

• html 和样式文件中的 url
  

打包的过程即从设置的入口（后面会讲到）开始，以模块为基础建立一个依赖树，以生成少数甚至一个打包文件为结束。

entry/output

Webpack 可以说是一个黑盒子，输入源代码，输出打包文件，所以必定有起点和终点，起点可以有多个，但是终点只有一个。

loader

在 module 中提到过，Webpack 不仅仅可以处理 javacript 文件，也可以处理其他类型的资源文件，这个时候用到的就是 loader。简单来说，Webpack 只可以运行处理 Javacript，其他类型的文件需要通过 loader 转化成 Javascript 模块。

plugin

刚开始使用 Webpack 时，很容易对 loader 和 plugin 之间的区别有疑惑。其实很简单，只需注意一点：loader 只在加载文件的时候可以用得上，plugin 可以在 Webpack 执行过程中任何有需要的地方使用。

Webpack 的强大来源于众多的配置项目，而所有功能的实现，配置的书写都建立在以上概念的基础之上，所以理解好以上概念，学习起来事半功倍。