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

一、为什么要学习webpack？

1、前端工程化重要的工具
2、团队中一定要有部分人熟悉webpack
3、高阶前端的必经之路

二、什么是webpack?

旧时代时，资源过多、依赖繁琐等许多问题都会影响开发效率 所以后来就出现了webpack、vite、rollup等工程化工具

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

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

三、理解Loader

为了处理非标准JS资源，设计出的资源翻译模块 作用是为了将资源编译成标准JS

1、使用Loader：

使用npm add -D css-loader style-loader less-loader安装Loader，然后添加module处理css文件

2、认识loader

①链式调用：

• less-loader:实现less转换成css
• css-loader:将css包装成符合js语法的内容
• style-loader:将css模块抱紧require语句，运行时调用injectStyle等函数将内容注入到页面的style标签

②其他特性：

特点：

• 链式执行
• 支持异步执行
• 分为normal、pitch两种模式

③常见loader：

以上是常见的loader，可以站在使用角度去掌握这些常见loader的功能、配置和方法

四、理解插件

webpack有很多功能都是基于插件实现的
1、插件架构精髓：对扩展开放、对修改封闭

2、插件围绕钩子（hooks）展开

钩子的核心信息：

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