loader - 分析 webpack 调用第三方 loader 的过程| 学习笔记

简介: 快速学习 loader - 分析 webpack 调用第三方 loader 的过程

开发者学堂课程前端自动化构建工具 Webpack快速学习 loader - 分析webpack 调用第三方 loader 的过程】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址https://developer.aliyun.com/learning/course/587/detail/8217


loader - 分析webpack 调用第三方 loader 的过程


调用 loader

webpack 打包时会先建一个文件类型,如果是 js文件会直接打包,非 js 文件会先写后缀名去 webpack.config.js 找对应的匹配规则,调用规则进行打包,找不到就会报错

{ test/ \.css$/,use:[style-loader,css-loader]},

//先调用css-loader

再调用style-loader

调用顺序是 从右向左调用

image.png

注意:webpack 处理第三方文件类型的过程:

1.发现这个要处理的文件不是 js 文件然后去配置文件中查找有没有对应的第三方  loader 规则

2.如果能找到对应的规则,就会调用对应的 loader 处理这种文件

3.在调用 loader 规则的时候,是从后往前调用的

4.当最后一个 loader 调用完毕会把处理的结果直接交给 webpack 进行打包合并,最终输出到 bundle.js 中去

相关文章
|
22天前
|
Web App开发 JSON 前端开发
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
34 0
|
1月前
|
JSON 前端开发 JavaScript
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)(上)
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
44 0
|
29天前
|
前端开发 JavaScript
webpack 核心武器:loader 和 plugin 的使用指南(下)
webpack 核心武器:loader 和 plugin 的使用指南(下)
webpack 核心武器:loader 和 plugin 的使用指南(下)
|
29天前
|
JSON 前端开发 JavaScript
webpack 核心武器:loader 和 plugin 的使用指南(上)
webpack 核心武器:loader 和 plugin 的使用指南(上)
webpack 核心武器:loader 和 plugin 的使用指南(上)
|
1月前
|
XML JSON 前端开发
说说webpack中常见的loader?解决了什么问题?
在Webpack中,Loader是用于处理各种文件类型的模块加载器,它们用于对文件进行转换、处理和加载。常见的Loader解决了以下问题:
8 0
|
1月前
|
Web App开发 前端开发 JavaScript
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)(下)
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
20 0
|
6月前
|
前端开发 JavaScript Shell
Webpack中常见的Loader?解决了什么问题?
Webpack中常见的Loader?解决了什么问题?
53 0
|
2月前
|
缓存 前端开发 API
《Webpack5 核心原理与应用实践》学习笔记-> webpack插件开发基础
《Webpack5 核心原理与应用实践》学习笔记-> webpack插件开发基础
31 0
|
2月前
|
JSON 数据格式
《Webpack5 核心原理与应用实践》学习笔记-> loader配置效验与内置工具
《Webpack5 核心原理与应用实践》学习笔记-> loader配置效验与内置工具
17 0
|
2月前
|
前端开发 JavaScript 测试技术
《Webpack5 核心原理与应用实践》学习笔记-> webpack的loader运行与调试
《Webpack5 核心原理与应用实践》学习笔记-> webpack的loader运行与调试
27 0