Webpack 知识体系｜ 青训营笔记

旺崽
49 阅读1分钟

Webpack 知识体系

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

为什么要学习 Webpack

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

什么是 Webpack

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

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

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

使用 Webpack

示例

在这里插入图片描述

核心流程

在这里插入图片描述

模块化 + 一致性

在这里插入图片描述

使用

在这里插入图片描述

流程类配置

在这里插入图片描述

配置总览

在这里插入图片描述

在这里插入图片描述

处理 CSS

在这里插入图片描述

在这里插入图片描述

接入 Babel

在这里插入图片描述

在这里插入图片描述

生成 HTML

在这里插入图片描述

在这里插入图片描述

工具线

在这里插入图片描述

HMR

在这里插入图片描述

Tree-Shaking

树摇，用于删除 Dead Code

在这里插入图片描述

在这里插入图片描述

理解 Loader

在这里插入图片描述

使用 Loader

在这里插入图片描述

认识 Loader：链式调用

在这里插入图片描述

认识 Loader：其他特性

在这里插入图片描述

常见 Loader

![image-20220808161451814](/Users/zaizai/Library/Application Support/typora-user-images/image-20220808161451814.png)

理解插件

在这里插入图片描述

在这里插入图片描述

学习方法

在这里插入图片描述

在这里插入图片描述

avatar
文章
阅读
粉丝