这是我参与「第四届青训营 」笔记创作活动的的第11天。
一、本堂课重点内容：
- 什么是webpack
- webpack打包核心流程
- webpack的一些组件
二、详细知识点介绍：
什么是Webpack
我们知道我们前端的项目是由各种各样的资源组成，比如png,js,jsx,vue,css,less···等等文件，早期我们需要手动通过script,img等标签来引入各种外部资源。当我们外部资源特别多时，我们需要手动管理，要考虑文件的应用顺序等问题，不但影响了开发的效率，还限制了项目的规模大小。
比如一下这种情况，手动管理成本很高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="index.css">
</head>
<body>
<img src="../../img.png" alt="">
<script src="../main.js"></script>
<script src="../head.js"></script>
<script src="../bar.js"></script>
</body>
</html>
为了解决这些问题，就出现了很多工程化的工具，也就有了工程化的概念。
Webpack 是前端资源的编译和打包工具。编译是为了将图片、less、sass、ts 等非 JS 文件转变成标准的 JS 内容。之后将编译好的内容打包成一个文件 bundle。Webpack 刚出现的时候，浏览器不支持 ESM 模式，当时将资源放到浏览器运行需要逐个引入 script，使用 Webpack 打包好后只需要插入一个 script。
Webpack打包流程
1、读取webpack的配置参数；
2、启动webpack，创建Compiler对象并开始解析项目；
3、从入口文件（entry）开始解析，并且找到其导入的依赖模块，递归遍历分析，形成依赖关系树；
4、对不同文件类型的依赖模块文件使用对应的Loader进行编译，最终转为Javascript文件；
5、整个过程中webpack会通过发布订阅模式，向外抛出一些hooks，而webpack的插件即可通过监听这些关键的事件节点，执行插件任务进而达到干预输出结果的目的。
三、课后个人总结：
对于现在工程化日益壮大的今天，模块化打包起到了非常重要的作用，学会使用Webpack，打造属于自己的核心竞争力。
