Webpack 知识体系 | 青训营笔记

这是我参与「第四届青训营」笔记创作活动的第3天

1.什么是Webpack？

前端项目是由各种资源组成的，比如PNG、JPG、JS、CSS等等，在我们初学前端时，接触的内容比较少，需要管理的资源也比较少，所以没有这方面的需求。但是随着我们学习的深入，制作一个项目的需要管理的资源也会随之变多，这个时候如果还是手动来管理这些资源就会有诸多不便，对开发效率影响非常大，所以这时候我们需要一些工程化工具来解决这个问题。

Webpack本质上是一种前端资源编译、打包工具。

它会将所有的资源文件作为一个个模块进行处理，并根据这些模块的依赖关系进行分析，最终打包，生成对应的静态资源。

2.使用Webpack

2.1 使用Webpack——示例

1.安装

npm i -D webpack webpack-cli

2.编辑配置文件

3.执行编译命令

npx webpack

2.2 核心流程————极度简化版

1. 入口处理：从‘entry’文件开始，启动编译流程
2. 依赖解析：从‘entry’文件开始，根据‘require’ or ‘import’等语句找到依赖资源
3. 资源解析：根据‘module’配置，调用资源转移器，将png、css等非标准JS资源转译为JS内容
4. 资源合并打包：将转译后的资源内容合并打包为可直接在浏览器运行的JS文件

递归调用2、3，直到所有资源处理完毕

2.3 模块化+一致性

2.4 使用Webpack

关于Webpack的使用方法，基本都围绕“配置”展开，而这些配置大致可划分为两类：

流程类：作用于流程中某个or若干个环节，直接影响打包效果的配置项

工具类：主流程之外，提供更多工程化能力的配置项

理解Loader

因为Webpack只认识符合JavaScript规范的文本，所以为了处理非标准的JS资源，设计出了资源翻译模块——Loader，用于将各种资源翻译为标准JavaScript格式的内容。

理解插件

插件在webpack的配置信息plugins选项中指定，用于完成一些 Loader不能完成的工作，比如打包优化、资源管理、环境变量注入等。