前言

本文主要介绍什么是webpack，webpack的工作原理，webpack的项目配置，包括loader/plugins/modules等一些功能点，并自己去编写自定义的插件。webpack5的模块联邦。通过这个博客，可以全面的了解熟悉webpack,并且具备去自定义开发插件的能力。

webpack概念介绍

什么是webpack

webpack是一个用于现代javascript技术项目的一个静态模块打包器。

什么是babel

说到webpack，好多人就会想到babel，babel 是一个 JavaScript转码编译器。（把（低版本）浏览器不认识的语法，编译成浏览器认识的语法。），webpack其实更像是集成一系列类似babel这类功能插件的集合打包工具。

webpack 和 babel 的关系

1. babel 也可以单独使用,webpack主要是打包工具，不能将ES6写法转为其他兼容的浏览器编译的ECMAscript，如新增的API，webpack本身是能处理简单的js文件的，真正将ES6转码的还是babel，所以如果你想你的webpack支持编辑js语言的能力，就还是需要依赖babel
2. webpack在实际使用中是使用babel-loader，babel做为webpack一个loader去使用
3. 通俗的说，如果webpack比喻成一个机器，那babel就是机器里面的一个功能零件，协助这个机器去完成他的工作

webpack 打包流程

1. 读取参数配置 - 这个阶段我们会读取webpack.config.js里面的参数和shell里面的命令参数
2. 开始准备编译阶段 - 这一步我们会通过调用webpack()方法返回一个compiler方法，创建我们的compiler对象，并且注册各个Webpack Plugin。找到配置入口中的entry代码，调用compiler.run()方法进行编译。
3. 模块编译阶段 - 从入口模块进行分析，调用匹配文件的loaders对文件进行处理。同时分析模块依赖的模块，递归进行模块编译工作。
4. 完成编译阶段 - 在递归完成后，每个引用模块通过loaders处理完成同时得到模块之间的相互依赖关系
5. 输出文件阶段

webpack 关键术语介绍

1. Module -不同文件类型的模块。Webpack就是用来对模块进行打包的工具，这些模块各种各样，比如：js 模块、css模块、sass模块、vue模块等等不同文件类型的模块。这些文件都会被 loader 转换为有效的模块，然后被应用所使用并且加入到依赖关系图中。相对于一个完整的程序代码，模块化的好处在于，模块化将程序分散成小的功能块，这就提供了可靠的抽象能力以及封装的边界，让设计更加连贯、目的更加明确。而不是将所有东西都揉在一块，既难以理解也难以管理

2. Chunk - 数据块

   a. 非初始化的时候：就是在问价打包的时候，对于一些动态导入的代码块，比如三方库，或者我们自己写功能函数或者代码块，这写被分割的代码文件就是chunk

   b. 还有一种是初始化的：就是写在入口文件处 (entry point) 的各种文件或者说模块依赖，就是 chunk ，它们最终会被捆在一起打包成一个 main.js （当然输出文件名你可以自己指定），这个 main.js 可以理解为 bundle，当然它其实也是 chunk。

3. Bundle 打包好的最终文件。如果说，chunk 是各种片段，那么 bundle 就是一堆 chunk 组成的“集大成者”，比如上面说的 main.js 就属于 bundle。当然它也类似于电路上原先是各种散乱的零件，最终组成一个集成块的感觉。它经历了加载和编译的过程，是源文件的最终版本。

简而言之，chunk 是 webpack 处理过程中的一组模块，bundle 是一个或多个 chunk 组成的集合。