这是我参与「第五届青训营 」伴学笔记创作活动的第13天

一、本堂课重点内容：

1. 什么是Webpack
2. Webpack打包核心流程
3. Loader组件
4. 如何学习Webpack

二、详细知识点介绍：

什么是Webpack

前端项目由资源构成

Webpack本质上是一种前端资源编译打包工具

• 多份资源文件打包成一个Bundle
• 支持Babel、Eslint、TS、CoffeScript、Less、Sass
• 支持模块化处理css、图片 等资源文件
• 支持 HMR + 开发服务器
• 支持持续坚挺、持续构建
• 支持代码分离
• 支持 Tree-shaking
• 支持 Sourcemap

使用Webpack

• 安装

npm i -D webpack webpack-cli

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

npx webpack

核心流程--极度简化版

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

模块化+一致性

1. 多个文件资源合并成一个，减少http请求数
2. 支持模块化开发
3. 支持高级JS特性
4. 支持Typescript,CoffeeScript方言
5. 统一图片，css,字体等其他资源的处理模型

配置大致分为两类

• 流程类：作用于流程中某个or若干个环节，直接影响打包效果的配置项
• 工具类：主流程外，提供更多工程化能力的配置项

使用Webpack--流程类配置

• 输入:entry,context
• 模块解析：resolve,externals
• 模块转译：module
• 后处理：optimization.mode,target

进阶篇：理解Loader

认识Loader:链式调用

• less-loader:实现less=>css的转换
• css-loader:将CSS包装成类似module.exports="${css}"的内容，包装后的内容符合JavaScript语法
• style-loader：将css模块包进require语句，并在运行时调用injectStyle等函数将内容注入到页面的style标签

认识Loader:其他特性

• 链式执行
• 支持异步执行
• 分normal,pitch两种模式

进阶篇：理解插件

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

钩子的核心信息：

1. 时机：编译过程的特定节点，Webpack会以钩子形式通知插件此刻正在发生什么事情；
2. 上下文：通过tapable提供的回调机制，以参数方式传递上下文信息；
3. 交互：在上下文参数对象中附带了很多存在side effect的交互接口，插件可以通过这些接口改变