Webpack知识体系

Webpack知识体系

---

1、什么是Webpack

webpack 是代码编译工具，有入口、出口、loader 和插件。

webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。

当 webpack 处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。

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

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

---

2、使用Webpack

示例

核心流程

模块化+一致性

• 多个文件资源合并成一个，减少http请求数
• 支持模块化开发 支持高级JS特性
• 支持Typescript、CoffeeScript方言
• 统一图片、CSS、字体等其它资源的处理模型
• Etc…

使用Webpack

• 流程类:作用于流程中某个 or若干个环节，直接影响打包效果的配置项

按使用频率：

- entry、output
- module、plugins
- mode
- watch、devServer、devtool

Webpack配置官方文档

处理CSS

接入Babel

生成HTML

• 工具类:主流程之外，提供更多工程化能力的配置项

HMR

模块热替换

Tree-Shaking

删除没有用到的代码

---

3、Loader组件

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

使用Loader

链式调用

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

其它特性

特点

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

常见Loader

---

4、Plugin组件

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

钩子的核心信息∶

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

---

5、如何学习Webpack

• 入门应用
  - 理解打包流程
  - 熟练掌握常用配置项、Loader、插件的使用方法，能够灵活搭建集成Vue、React、Babel、Eslint、Less、Sass、图片处理等工具的 Webpack 环境
  - 掌握常见脚手架工具的用法，例如:Vuo-cli、create-react-app、@angular/cli
• 进阶
  - 理解Loader、Plugin机制,能够自行开发Webpack组件
  - 理解常见性能优化手段,并能用于解决实际问题
  - 理解前端工程化概念与生态现状
• 大师级
  - 阅读源码,理解Webpack编译、打包原理,甚至能够参与共建

参考资料：
Webpack5知识体系

扩展：

面试要掌握到什么程度？

首先，网上很多相关面试,主要围绕三种主题︰

• Loader有什么作用、怎么写loader、常用loader有哪些？
  - css-loader、style-loader、wue-loader、 file-loader.eslint-laader、babel-laader·
• 插件有什么用，怎么写插件，插件原理？
• Bundle、chunk、rmodule 分别是什么含义？