这是我参与「 第五届青训营 」笔记创作活动的第14天
一、本堂课重点内容：
- Webpack定义解析
- Webpack使用方法
- 理解Loader
- 理解插件
二、详细知识点介绍：
2.1 Webpack定义解析
前言：前端项目是由多个资源组成的，对于这些资源的管理可以采用手动的方式，但是随着项目体积的增大，手动管理的方式逐渐无法满足需求，所以出现了很多工程化工具
Webpack本质上是一种前端资源编译、打包工具，将多份资源文件打包成一个 Bundle，支持Babel、Eslint、TS、CoffeScript、Less、Sass ，支持模块化处理 css、图片 等资源文件，支持 HMR ＋开发服务器支持持续监听、持续构建支持代码分离，支持 Tree-shaking，支持 Sourcemap
2.1 使用Webpack
安装：npm i -D webpack webpack-cli
编辑配置文件：
执行编译命令：npx webpack
核心流程：
模块化 + 一致性：
- 多个文件资源合并成一个，减少 http 请求数支持模块化开发
- 支持模块化开发
- 支持高级 JS 特性
- 支持 Typescript、CoffeeScript 方言
- 统一图片、CSS、字体 等其它资源的处理模型
- Etc...
流程类配置：
配置总览：
处理CSS：
工具线：
三、面试题：
- 什么是Webpack?
webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。宗旨是一切静态资源皆可打包。
有人就会问为什么要webpack？webpack是现代前端技术的基石，常规的开发方式，比如jquery,html,css静态网页开发已经落后了。现在是MVVM的时代，数据驱动界面。
webpack做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。
当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。
- Webpack的核心概念
一共5个核心概念：Entry（入口）、Output（出口）、Loader（模块转换器）、Plugins（插件）、Module(模块)。
1.Entry（入口） ：指示 webpack 应该使用哪个模块来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。
2.Output（出口） ：告诉webpack在哪里输出它所创建的结果文件，以及如何命名这些文件，默认值为./dist。
3.Loader（模块转换器） ：将所有类型的文件转换为webpack能够处理的有效模块，然后就可以利用webpack的打包能力，对它们进行处理。
4.Plugins（插件） ：在webpack构建流程中的特定时机注入拓展逻辑来改变构建结果或你想要做的事情。
5.Module(模块)：开发者将程序分解成离散功能块，并称之为模块。在webpack里一个模块对应着一个文件，webpack会从配置的Entry开始递归找出所有依赖的模块。
- webpack工作的原理是什么？工作流程是什么？
webpack 读取配置，根据入口开始遍历文件，解析依赖，使用loader处理各模块，然后将文件打包成bundle后输出到output指定的目录中。
webpack的工作流程是：
Webpack 的运行流程是一个串行的过程，从启动到结束会依次执行以下流程：
初始化参数：从配置文件和 Shell 语句中读取与合并参数，得出最终的参数开始编译：用上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，执行对象的 run 方法开始执行编译确定入口：根据配置中的 entry 找出所有的入口文件编译模块：从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理完成模块编译：在经过第4步使用 Loader 翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统
在以上过程中，Webpack 会在特定的时间点广播出特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑，并且插件可以调用 Webpack 提供的 API 改变 Webpack 的运行结果。
四、引用参考：
