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 中去

相关文章
|
3月前
|
缓存 前端开发 数据可视化
Webpack Bundle Analyzer:深入分析与优化你的包
Webpack Bundle Analyzer是一款可视化工具,帮助分析Webpack构建结果,找出占用空间较大的模块以便优化。首先需安装Webpack和Webpack Bundle Analyzer,接着在`webpack.config.js`中配置插件。运行Webpack后,会在`dist`目录生成`report.html`,展示交互式图表分析包大小分布。为优化可采用代码分割、Tree Shaking、压缩插件、加载器优化、模块懒加载、代码预热、提取公共库、使用CDN、图片优化、利用缓存、避免重复模块、使用Source Maps、优化字体和图标、避免全局样式污染以及优化HTML输出等策略。
124 3
|
17天前
|
前端开发 UED
Webpack 中处理 CSS 和图片资源的多 Loader 配置
【10月更文挑战第12天】 处理 CSS 和图片资源是 Webpack 配置中的重要部分。通过合理选择和配置多个 Loader,可以实现对这些资源的精细处理和优化,提升项目的性能和用户体验。在实际应用中,需要不断探索和实践,根据项目的具体情况进行灵活调整和优化,以达到最佳的处理效果。通过对 Webpack 中多 Loader 处理 CSS 和图片资源的深入了解和掌握,你将能够更好地应对各种复杂的资源处理需求,为项目的成功构建和运行提供坚实的基础。
42 1
|
17天前
|
前端开发 JavaScript
Webpack 中多个 Loader 的配置
【10月更文挑战第12天】使用多个 Loader 进行配置是 Webpack 中常见的操作,可以实现对各种资源的精细处理和优化。在配置时,需要根据具体需求合理选择和排列 Loader,并注意它们之间的顺序和交互关系。同时,不断了解和掌握新的 Loader 以及它们的特性,有助于更好地发挥 Webpack 的强大功能,提升项目的开发效率和质量。通过深入理解和熟练运用多个 Loader 的配置方法,你将能够更加灵活地处理各种资源,满足项目的多样化需求。
36 2
|
17天前
|
前端开发 JavaScript
Webpack 常用 Loader 和 Plugin
【10月更文挑战第12天】Webpack 是一个强大的模块打包工具,能够将各种资源模块进行打包和处理。Loader 用于转换模块的源代码,如 `babel-loader` 将 ES6+ 代码转换为 ES5,`css-loader` 处理 CSS 文件等。Plugin 扩展 Webpack 功能,如 `HtmlWebpackPlugin` 自动生成 HTML 文件,`UglifyJsPlugin` 压缩 JavaScript 代码。通过合理配置和使用 Loader 和 Plugin,可以构建高效、优化的项目。
16 2
|
2月前
|
设计模式 前端开发 JavaScript
webpack实战之手写一个loader和plugin
该文章详细讲解了如何从零开始编写一个自定义的Webpack Loader和Plugin,包括它们的工作原理、开发步骤以及如何将自定义的Loader和Plugin集成到Webpack配置中。
webpack实战之手写一个loader和plugin
|
3月前
webpack——通过webpack-bundle-analyzer分析项目包占比情况
webpack——通过webpack-bundle-analyzer分析项目包占比情况
32 2
webpack——通过webpack-bundle-analyzer分析项目包占比情况
|
3月前
|
缓存 JSON JavaScript
Webpack 传递给 Loader 的原始内容是一个 UTF-8 格式编码的字符串
本文详细介绍了Webpack中Loader的概念及其重要性。Webpack仅支持处理JS和JSON文件,而对于CSS、图片等其他类型文件,则需要Loader来转换。文章列举了多种常见Loader,如css-loader、style-loader、babel-loader等,并提供了具体配置示例。此外,还介绍了如何自定义Loader,包括初始化项目、实现基本功能及处理异步操作等内容。通过本文,读者可以全面了解Loader的作用及其实现方法。
28 3
|
4月前
|
缓存 JSON JavaScript
用Webpack写一个Loader
在Webpack写一个Loader
23 1
|
3月前
webpack——You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
webpack——You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
347 0