这是我参与「第五届青训营」伴学笔记创作活动的第13天
知识要点
- Webpack定义
- Webpack使用方法
- Loader
- Plugin
为什么要学习Webpack
- 理解前端“工程化”概念、工具、目标
- 一个团队需要有人熟悉Webpack
- 前端进阶必经之路
什么是Webpack
在前端项目是由资源构成的，由于手动管理资源非常困难，所以出现了很多工程化工具。
本质上是一种前端资源编译，打包工具。将多份文件打包成一个Bundle，支持Bable、Eslint、TS等各种工程化工具。还有很多强大的功能。
如何使用Webpack
核心流程如下
- 入口处理，从 entry 文件开发，启动编译流程
- 以来解析，从 entry 文件开始，根据 require or import 等语句找到以来资源
- 资源解析，根据 module 配置，调用资源转移器，将png、css等非标准JS资源转译为JS内容
- 资源合并并打包，将转移后的合并内容合并打包为可直接在浏览器运行的JS文件
（递归调用2，3，4直到资源全部处理完毕）
模块化+一致性
- 多个文件资源合并成一个，减少http请求数
- 支持模块化开发
- 支持高级JS特性
- etc
使用Webpack
关于Webpack使用方法，基本都是围绕配置展开，可以分为两类：
- 流程类：作用于流程中某个or某几个环节，直接影响打包效果的配置项
- 工具类：之流程之外，提供更多工程化能力的配置项
配置总览：（按使用频率从高到低）
- entry/output
- module/plugins
- mode
- watch/devServer/devtool
接入Bable
- 安装依赖
- 声明产物出口 output
- 执行 npx webpack
使用loader
- 安装loader
- 添加module处理css文件
链式调用
- less-loader 实现less=>css转换
- css-loader 将css包装成类似module.export="${css}"的内容，包装后的内容符合JavaScript语法
- style-loader 将css模块抱紧require语句，并在运行时调用injectStyle等函数将内容注入到页面的style标签中
其他特性
- 链式执行
- 支持异步执行
- 分normal、pitch两种模式
为什么设计出插件
插件架构的精髓：对扩展开放，对修改封闭
个人感悟
在从基础到进阶的过程中，webpack是一条必经之路，需要好好的掌握这个技能
