Webpack知识体系 | 青训营笔记

107 阅读1分钟

这是我参与「第四届青训营」笔记创作活动的的第11天

为什么要学习Webpack

  • 理解前端“工程化”概念、工具、目标
  • 一个团队总要有那么几个人熟悉Webpack,某种程度上可以成为个人的核心竞争力
  • 高阶前端必经之路

什么是Webpack

image.png

image.png

image.png

Webpack打包核心流程

image.png

image.png

模块性+一致性

image.png

使用Webpack

image.png

流程类配置

image.png

配置总览

image.png 按使用频率:

  • entry/output
  • module/plugins
  • mode
  • watch/devServer/devtool

流程类

image.png

处理CSS

image.png

接入Babel

image.png

生成HTML

image.png

image.png

工具类

模块热替换(Hot Module Replacement)

image.png

树摇(Tree Shaking)———用于删除Dead Code

image.png

Loader组件

为了处理非标准JS资源,设计出资源翻译模块

用于将资源翻译为标准JS

使用Loader

image.png

image.png

其他特性:

image.png 特点

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

image.png

常见Loader

image.png

Plugin组件

image.png

image.png

关于钩子

image.png

image.png

如何学习Webpack

一些知识点

image.png