前端与Webpack | 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 6 天

1. Webpack 的作用
2. 理解 Webpack 配置结构，学习关键配置项
3. Loader 的作用与常用 Loader
4. 插件基本形态与作用

什么是Webpack

前端由资源构成 本质上是一种前端资源编译，打包工具

使用Webpack

1. 安装
2. 编辑配置文件
3. 执行编译命令 关于 webpack 的使用方法，基本都围络“配”展开，而这些配置大致可划分为两类: 力 流程类: 作用于流程中某个 or 若干个环节直接影响打包效果的配产项 力工具类: 主流程之外，提供更多工程化能力的配置项

插件

这是一个特别复杂的过程，那么新人需要了解整个流程细节，上手成本高功能迭代成本高，牵一发动全身D功能僵化，作为开源项目而言缺乏成长性 Blabla 心智成本高 => 可维护性低 => 生命力弱 插件架构精髓:对扩展开放，对修改封闭

钩子的核心信息

时机: 编译过程的特定节点，Webpack 会以钩子形式通知插件此刻正在发生什么事情上下文: 通过 tapable 提供的回调机制，以参数方式传递上下文信息交互: 在上下文参数对象中附带了很多存在side effect 的交互接口，插件可以通过这些接 口改变

学习方法

入门应用

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

进阶

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

大师级

阅读源码，理解Webpack编译，打包原理，甚至能够参与共建。