Webpack知识体系|青训营

48 阅读1分钟

Webpack知识体系阅读笔记

为什么要学习Webpack

理解前端工程化概念、工具、目标

image.png

1. 什么是Webpack

image.png webpack本质上是一种事件流的机制,它的工作流程就是将各个插件串联起来,而实现这一切的核心就是Tapable,webpack中最核心的负责编译的Compiler和负责创建bundles的Compilation都是Tapable的实例。

2. Webpack打包核心流程

3. 使用webpack

image.png

为什要使用WebPack

a:模块化,让我们可以把复杂的程序细化为小的文件; b:类似于TypeScript这种在JavaScript基础上拓展的开发语言:使我们能够实现目前版本的JavaScript不能直接使用的特性,并且之后还能转换为JavaScript文件使浏览器可以识别; c:scss,less等CSS预处理器

这些改进确实大大的提高了我们的开发效率,但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常繁琐的,这就为WebPack类的工具的出现提供了需求。