这是我参与「第五届青训营 」伴学笔记创作活动的第 十三 天
前端技术栈之构建webpack知识体系｜ 青训营笔记
为什么要学习Webpack？
- webpack 是代码编译工具，有入口、出口、loader 和插件。webpack 是一个用于现代 JS 应用程序的静态模块打包工具
- 理解前端工程化概念，工具，目标
- 一种团队主要有那么几个熟悉Webpack，某种程度上可以成为个人的核心竞争力。
- 高阶前端必经之路
什么是webpack
前端项目由什么构成？
- 资源如：PNG，JPG，GIF，WEBP，JS，TS，CSS，Less，Vue ...
当然，可以手动管理这些资源：但
- 依赖手工，比如50个JS文件...操作，过程比较繁琐。
- 当代码文件之间有依赖的时候，就得严格依赖顺序书写
- 开发与生产环境一致，难以接入TS或JS新特性。
- JS，图片，CSS 资源管理模型不一致
这些都是旧时代非常突出的问题，对开发效率影响非常大，知道出现了很多工程化工具，如：
- Webpack
- Vite
- Gulp
某种程度上正是这些工具的出现，才有了前端工程这一概念。
Webpack本质是一种前端资源编译，打包工具。
- 多份资源文件打包成一个Bundle
- 支持 Babel，Eslint， TS ...
- 支持模块化处理css，图片 等资源文件。
- 支持HMR + 开发服务器
- 支持持续监听，持续构建
- 支持代码分离
使用Webpack
- 安装
npm i -D webpack webpack-cli - 执行编译命令
npx webpack
核心流程 --极度简化版
- 入口处理： 从 enty 文件开始，启动编译流程
- 依赖解析：从 enty 文件开始，根据 require or import 等语句找到依赖资源
- 资源解析：根据 module 配置，调用资源转移器，将png ， css等非标准JS资源转为JS内容
- 资源合并打包：将转译后的资源内容合并打包为可直接在浏览器运行的JS文件
模块化+一致性
- 多个文件资源合并成一个，减少HTTP 请求数
- 支持多模块化开发
- 支持高级JS 特性
- 支持 typescript ， coffeeScript 方言
- 统一图片，css ，字体，等其他资源的处理模型
Webpack 两大类
关于Webpack 的使用方法，基本都围绕配置展开，而这些配置大致可划分为两类：
- 流程类： 作用于流程中某个or若干个环节，直接影响打包效果的配置项。
- 工具类：主流程之外，提供更多的工程化能力的配置项。
