Webpack|青训营笔记 这是我参与【第四届青训营】笔记创作活动的第4天
- 什么是Webpack
- 打包核心流程
- 关键配置项介绍
- Loader组件
- Plugin组件
- 如何学习Webpack
- 理解Webpack的基本用法
- Loader\Plugin组件设计
- 前端项目由代码资源构成，曾经需要手动管理资源，当外部资源很多时需要写很多标签，从而限制了页面规模
- 出现工程化工具：Vite\browserify等，这些工具的出现带来了“前端工程”这一概念
- Webpack本质上是一种前端资源编译、打包工具：多份资源文件打包成一个Bundle，支持持续监听、持续构建，支持代码分离、支持Sourcemap\Babel\Eslint\TS\CoffeScript\Less\Sass等
- 使用Webpack:安装-编辑配置文件-执行编译命令
- entry:当前项目入口、output：当前项目最终打包后放到了哪里，相当于出口
- 核心流程：1.入口处理（读文件、启动编译的过程）；2.依赖解析（根据‘require’or'import'等语句找到依赖资源）；3.资源解析（根据‘module’配置，调用资源转移器，将png\css等非标准JS资源转译为JS内容）；4.资源合并加打包（将转译后的资源内容合并打包为可直接在浏览器上运行的JS文件）
- 模块化+一致性
- 配置分为两类（在使用时主要思考我要怎么写配置文件）：流程类（作用于流程中某个or若干个环节，直接影响打包效果的配置项）；工具类：主流程之外，提供更多工程化能力的配置项
- 跟流程类强相关的：输入（‘entry’'context'）;模块解析（‘resolve’'externals'）;模块转译（‘module’）;后处理（‘optimization’'mode''target'）
- 使用Webpack--处理CSS：1.安装Loader;2.添加'module'处理CSS文件
- 使用Webpack--接入Bable：1.安装依赖；2.声明产物出口'output';3.执行'npx webpack'
- Loader:其他特性：链式执行；支持异步执行；分normal\pitch
