Webpack知识体系|青训营笔记

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

什么是Webpack

前端项目由资源构成： PNG、JPG、GIF、WEBP、JS、TS、CSS、Less、Vue、JSX、Sass...

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

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

使用webpack

核心流程：

模块化+一致性

关于Webpack的使用方法，基本都围绕“配置”展开，而这些配置大致可划分为两类：

• 流程类：作用于流程中的某个or若干个环节，直接影响打包效果的配置项
• 工具类：主流程之外，提供更多工程化能力的配置项

流程类配置：

配置总览

学习方法

1.入门应用

• 理解打包流程
• 熟练掌握常用配置项、Loader、插件的使用方法，能够灵活搭建集成Vue、React、Babel、Eslint、Less、Sass、图片处理等工具的Webpack环境
• 掌握常见脚手架工具的用法，例如：Vue-cli、create-react-app、@angular/cli

2.进阶

• 理解Loader、Plugin机制，能够自行开发Web组件
• 理解常见性能优化手段，并能用于解决实际问题
• 理解前端工程化概念与生态现状

2.大师级

• 阅读源码，理解webpack编译、打包原理，甚至额能够参与共建

学习资料推荐

• 老师公众号：Tecvan
• Awesome-webpack-4plus
• 《深入浅出 WebPack》
• 《Survivejs-Webpack Book》