构建Webpack知识体系 | 青训营

为什么要学习WebPack？

• 理解前端工程化概念、工具、目标
• 一个团队总要有那么几个人熟悉Webpack，某种程度上可以称为个人的核心竞争力
• 高阶前端必经之路

什么是Webpack

前端项目由很多种资源构成，比如PNG、JPG、GIF、WEBP、JS、TS、css、Less、Vue、JSX、Sass

以前手动管理这些资源，过程很繁琐，对开发效率影响非常大

后来出现了很多程序化工具，比如webpack、Vite、rollup等，正是有了这些工具的出现，才有了”前端工程“这一概念

本质上是一种前端编译、打包工具

Webpack打包核心流程

使用 Webpack

1.安装 2.编辑配置文件 3.执行编译命令

核心流程

1.入口处理：从‘entry’文件开始，启动编译流程

2.依赖解析：从‘entry’文件开始，根据‘require’or‘import’等语句找到依赖资源

3.资源解析：根据‘module’配置，调用资源转移器，将png、css等非标准JS资源转译为JS内容

4.资源合并打包：将转译后的资源内容合并打包为可直接在浏览器运行的JS文件

主要是模块化和一致性

使用Webpack

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

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

  输入：entry context

  模块解析：resolve externals

  模块转译：module

  后处理：optimization mode target

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

思考题：

• Loader有什么作用？为什么这里需要用到css-loader、style-loader

• 与旧时代，在HTML文件中维护CSS 相比，这种方式会有什么优劣处?

• 有没有接触过Less、Sass、 Stylus 这一类CSS预编译框架？如何在Webpack接入这些工具？

• 参考资料：

  • Css-loader

  • Webpack 原理系列七：如何编写loader

  • Style-loader

HMR、Tree-Shaking树摇

个人总结

• Entry: 指定webpack开始构建的入口模块

• Output: 指定webpack如何命名输出的文件以及输出的目录

• Loader: webpack默认只能处理JavaScript，loader的存在能是其将一些非js文件，变成能够处理的模块

• Plugins: 它扩展了webpack的功能，其功能十分强大，例如打包优化、压缩等

此次课程，我理解了Webpack的基本用法，通过介绍Webpack功能、Loader和Plugin组件设计，对前端学习建立了知识体系，对Webpack有了基本的了解。