构建Webpack知识体系|青训营

49 阅读1分钟

构建Webpack知识体系

什么是Webpack

前端项目是由资源构成的,09年前手动管理资源,但是当资源数目增多时,开发的效率会大大降低,于是工程化工具应运而生,有了“前端工程化”的概念

Webpack本质上是一种前端资源编译打包工具,把非js文件进行编译后变成js文件,再把编译好的文件打包成一个Bundie

image.png

使用Webpack

image.png

核心流程

入口处理----依赖解析----资源解析----资源合并打包

image.png

本质上webpack就是模块化+一致性

Webpack的使用基本围绕“配置”展开,配置又大致划分为:流程类工具类

  • 流程类指作用于流程中一个或多个环节直接影响打包效果的配置项
  • 工具类指主流程之外,提供更多工程化能力的配置项

image.png

配置类相关:

image.png

处理css:注册loader

image.png