这是我参与【第五届青训营】笔记创作活动的第十一天

2023.02.09

01.什么是Webpack

• 前端项目由许多资源构成。
• 本质上是一种前端资源编译、打包工具
  • 多份资源文件打包成一个Bundle；
  • 支持Babel、Eslint、TS、CoffeScript、Less、Sass
  • 支持模块化处理css、图片等资源文件
  • 支持HMR + 开发服务器
  • 支持持续监听、持续构建
  • 支持代码分离等等......

02.使用Webpack

• 安装
• 编辑配置文件
• 执行编译命令

核心流程：

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

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

• 流程类：作用于流程中某个or若干个环节，直接影响打包效果的配置项。
  • 流程类配置：输入（'entry' 'context'）；模块解析（'resolve' 'externals'）；模块转译（'module'）；后处理（'optimization' 'mode' 'target'）
• 工具类：主流程之外，提供更多工程化能力的配置项。

接入Babel:

• 安装依赖
• 声明产物出口'output'
• 执行'npx webpack'

03.理解Loader

问题：Webpack只认识JS

为了处理非标准JS资源，设计出资源翻译模块——Loader，用于将资源翻译为标准JS。

使用Loader:

• 安装Loader
• 添加'module'处理css文件
• 链式调用
  • less - loader：实现less => css的转换；
  • css - loader：将CSS包装成类似module.exports = "${css}"的内容，包装后的内容符合JavaScript语法；
  • style - loader：将css模块包进require语句，并在运行时调用injectStyle等函数将内容注入到页面的style标签。
• 其它特性：链式执行；支持异步执行；分normal、pitch两种模式

04.理解插件

插件架构精髓：对扩展开放，对修改封闭。