Webpack知识体系

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

本堂课的知识要点：

• 什么是Webpack
• 使用Webpack
• 进阶篇：理解Loader
• 理解插件
• 学习方法

课程目标

为什么要学习webpack

• 理解前端工程化概念，工具目标
• 一个团队总要有几个人熟悉webpack，可以成为个人的核心竞争力。
• 高阶前端必经之路

01.什么是webpack

- 前端项目由许多资源文件

很久以前手动管理这些资源。手动维护对大型开发效率影响大

02使用webpack

• 安装
• 编辑配置文件
• 执行编译命令

• entry：定义入口文件
• output：定义出口文件

怎么使用webpack

• 写配置文件

• module：定义模块
• plugin：定义创建

文件结构：

• 处理非js文件 如css
  定义module

处理js

• 生成html

• 使用到插件

• 工具线

• HMR--模块替换

• 同步展示页面效果

• Tree-Shaking

03进阶篇：理解Loader

• Loader-内容转化
• webpack只认识js
• 其他文件css，html，会解析错误
• 需要用Loader处理，转化成js

使用Loader

链式调用

编写Loader模板

• 常见Loader

04理解插件

• 很多工具都有插件。VScode chrome firefox
• 为什么要插件？ 提升工具扩展性

理解插件,首先从钩子展开

05学习方法

• 入门应用：理解webpack打包流程，可以处理vue，react等开发环境
• 进阶：理解Loader等，可自行写Loader