当前位置： 首页 > news >正文

webpack loader全解析，从入门到精通（10）

news 2025/12/27 10:03:39

webpack 的核心功能是分析出各种模块的依赖关系，然后形成资源列表，最终打包生成到指定的文件中。更多复杂的功能需要借助 webpack loaders 和 plugins 来完成。

1. 什么是 Loader

Loader 本质上是一个函数，它的作用是将某个源码字符串转换成另一个源码字符串返回。Loader 在模块解析的过程中被调用，以得到最终的源码。
在这里插入图片描述

2. Loader 的工作流程

全流程

  1. 初始化：webpack 读取配置文件，解析入口模块。
  2. 编译：
    • 创建 chunk：根据入口模块创建 chunk。
    • 解析模块：解析每个模块的依赖关系。
    • 应用 loader：根据配置的 loader 对模块进行转换。
  3. 输出：将编译后的资源输出到指定的文件中。
    在这里插入图片描述

Chunk 中解析模块的流程

在这里插入图片描述

  1. 读取模块内容：读取模块的源代码。
  2. 解析依赖：解析模块中的依赖关系。
  3. 生成 AST：生成抽象语法树（AST）。
  4. 生成模块代码：根据 AST 生成最终的模块代码。
更详细的流程

在这里插入图片描述

  1. 读取模块内容：读取模块的源代码。
  2. 解析依赖：解析模块中的依赖关系。
  3. 应用 loader：
    • 从右到左：多个 loader 会从右到左依次执行。
    • 链式调用：每个 loader 的输出作为下一个 loader 的输入。
  4. 生成 AST：生成抽象语法树（AST）。
  5. 生成模块代码：根据 AST 生成最终的模块代码。

处理 loaders 的流程

在这里插入图片描述

  1. 当前模块是否满足某个规则？

    • 如果当前模块满足某个规则，则继续下一步。
    • 如果不满足，则跳过所有 loader，直接进入下一个模块。

  2. 读取规则中对应的 loaders

    • 根据当前模块所满足的规则，找到相应的 loader 列表。

  3. 加载 loaders 数组

    • 将找到的所有 loader 放入一个数组中。

  4. 处理 loader 流程

    • 从右到左依次执行每个 loader。
      • 第一个 loader 接收原始代码作为输入。
      • 每个 loader 执行完后，将其结果作为下一个 loader 的输入。
      • 最终的结果就是经过所有 loader 处理后的源码。

    总的来说，当一个模块满足特定规则时，webpack 会按照配置好的顺序，从右到左依次应用每个 loader，直到获得最终的源码。如果模块不满足任何规则，则不会应用任何 loader。这种机制允许开发者灵活地定义不同类型的文件应该如何被处理。

3. Loader 配置

完整配置

module.exports = {module: { // 针对模块的配置，目前版本只有两个配置，rules、noParserules: [ // 模块匹配规则，可以存在多个规则{ // 每个规则是一个对象test: /\.js$/, // 匹配的模块正则use: [ // 匹配到后应用的规则模块{  // 其中一个规则loader: "模块路径", // loader 模块的路径，该字符串会被放置到 require 中options: { // 向对应 loader 传递的额外参数// 配置选项}}]}]}
};

简化配置

module.exports = {module: { // 针对模块的配置，目前版本只有两个配置，rules、noParserules: [ // 模块匹配规则，可以存在多个规则{ // 每个规则是一个对象test: /\.js$/, // 匹配的模块正则use: ["模块路径1", "模块路径2"] // loader 模块的路径，该字符串会被放置到 require 中}]}
};

4. 常见的 Loader

  • babel-loader：将 ES6+ 代码转换为 ES5 代码。
  • css-loader：解析 CSS 文件中的 @import 和 url() 语句。
  • style-loader：将 CSS 插入到 DOM 中。
  • file-loader：将文件输出到指定目录，并返回文件的 URL。
  • url-loader：类似于 file-loader，但可以将小文件转为 Data URL。
  • less-loader：将 Less 文件编译为 CSS。
  • sass-loader：将 Sass/SCSS 文件编译为 CSS。
  • ts-loader：将 TypeScript 文件编译为 JavaScript。

5. 示例

假设我们有一个项目，需要使用 babel-loader 来转换 ES6 代码，使用 css-loader 和 style-loader 来处理 CSS 文件。

项目结构
my-project/
├── src/
│   ├── index.js
│   ├── styles.css
├── dist/
├── package.json
└── webpack.config.js
webpack.config.js
const path = require('path');module.exports = {mode: 'development', // 或 'production'entry: './src/index.js',output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist')},module: {rules: [{test: /\.js$/,exclude: /node_modules/,use: {loader: 'babel-loader',options: {presets: ['@babel/preset-env']}}},{test: /\.css$/,use: ['style-loader', 'css-loader']}]}
};
安装依赖
npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-env css-loader style-loader
运行构建

在 package.json 中添加一个 build 脚本：

{"scripts": {"build": "webpack"}
}

然后运行：

npm run build

构建完成后，dist 目录下会生成 bundle.js 文件，你可以在 HTML 文件中引入这个文件：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>My Webpack Project</title>
</head>
<body><script src="dist/bundle.js"></script>
</body>
</html>

总结

通过本课程，你已经了解了 webpack 中 loader 的概念、工作流程以及如何配置 loader。合理使用 loader 可以帮助你处理各种类型的文件，提高项目的可维护性和灵活性。

相关文章：

webpack loader全解析，从入门到精通（10）

webpack 的核心功能是分析出各种模块的依赖关系&#xff0c;然后形成资源列表&#xff0c;最终打包生成到指定的文件中。更多复杂的功能需要借助 webpack loaders 和 plugins 来完成。 1. 什么是 Loader Loader 本质上是一个函数&#xff0c;它的作用是将某个源码字符串转换成…...

编程日记 2024/11/12 0:34:08

python机器人Agent编程——实现一个本地大模型和爬虫结合的手机号归属地天气查询Agent

目录 一、前言二、准备工作三、Agent结构四、python模块实现4.1 实现手机号归属地查询工具4.2实现天气查询工具4.3定义创建Agent主体4.4创建聊天界面 五、小结PS.扩展阅读ps1.六自由度机器人相关文章资源ps2.四轴机器相关文章资源ps3.移动小车相关文章资源ps3.wifi小车控制相关…...

编程日记 2024/11/12 0:33:07

【动态规划】斐波那契数列模型总结

一、第 N 个泰波那契数 题目链接&#xff1a; 第 N 个泰波那契数 题目描述&#xff1a; 题目分析&#xff1a; 1、状态表示&#xff1a; dp[i] 表示&#xff1a;第 i 个斐波那契数的值 2、状态转移方程&#xff1a; 由题意可知第 i 个数等于其前三个数之和 dp[i] dp[i-…...

编程日记 2024/11/12 0:32:06

EasyUI弹出框行编辑，通过下拉框实现内容联动

EasyUI弹出框行编辑&#xff0c;通过下拉框实现内容联动 需求 实现用户支付方式配置&#xff0c;当弹出框加载出来的时候&#xff0c;显示用户现有的支付方式&#xff0c;datagrid的第一列为conbobox,下来选择之后实现后面的数据直接填充&#xff1b; 点击新增&#xff1a;新…...

编程日记 2024/11/12 0:28:02

国产linux系统（银河麒麟，统信uos）使用 PageOffice 实现word文件在线留痕

PageOffice 国产版 &#xff1a;支持信创系统&#xff0c;支持银河麒麟V10和统信UOS&#xff0c;支持X86&#xff08;intel、兆芯、海光等&#xff09;、ARM&#xff08;飞腾、鲲鹏、麒麟等&#xff09;、龙芯&#xff08;LoogArch&#xff09;芯片架构。 查看本示例演示效果 …...

编程日记 2024/11/12 0:27:00

使用亚马逊 S3 连接器为 PyTorch 和 MinIO 创建地图式数据集

在深入研究 Amazon 的 PyTorch S3 连接器之前&#xff0c;有必要介绍一下它要解决的问题。许多 AI 模型需要使用无法放入内存的数据进行训练。此外&#xff0c;许多为计算机视觉和生成式 AI 构建的真正有趣的模型使用的数据甚至无法容纳在单个服务器附带的磁盘驱动器上。解决存…...

编程日记 2024/11/12 0:23:58

自动化运维：提升效率与稳定性的关键技术实践

自动化运维&#xff1a;提升效率与稳定性的关键技术实践 在数字化转型的浪潮中&#xff0c;企业对于IT系统的依赖日益加深&#xff0c;系统的复杂性和规模也随之膨胀。面对这一挑战&#xff0c;传统的运维模式——依靠人工进行服务器的监控、配置变更、故障排查等任务&#xf…...

编程日记 2024/11/12 0:21:56

Google Go编程风格指南-介绍

关于 首先应该明确的是&#xff1a;Go语言是Google搞出来的&#xff0c;这个编程风格指南也是它提出来的&#xff0c;详见&#xff1a;https://google.github.io/styleguide/go/。 然后国内翻译组跟上&#xff0c;于是有了中文版&#xff1a;https://gocn.github.io/stylegui…...

编程日记 2024/11/12 0:20:55

思科模拟器路由器配置实验

一、实验目的 了解路由器的作用。掌握路由器的基本配置方法。掌握路由器模块的使用和互连方式。 二、实验环境 设备&#xff1a; 2811 路由器 1 台计算机 2 台Console 配置线 1 根网线若干根 拓扑图&#xff1a;实验拓扑图如图 8-1 所示。计算机 IP 地址规划&#xff1a;如表…...

编程日记 2024/11/12 0:17:53

机器学习—选择激活函数

可以为神经网络中的不同神经元选择激活函数&#xff0c;我们将从如何为输出层选择它的一些指导开始&#xff0c;事实证明&#xff0c;取决于目标标签或地面真相标签y是什么&#xff0c;对于输出层的激活函数&#xff0c;将有一个相当自然的选择&#xff0c;然后看看激活函数的选…...

编程日记 2024/11/12 0:16:52

[ Linux 命令基础 4 ] Linux 命令详解-文本处理命令

&#x1f36c; 博主介绍 &#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 _PowerShell &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【数据通信】 【通讯安全】 【web安全】【面试分析】 &#x1f389;点赞➕评论➕收藏 养成习…...

编程日记 2024/11/12 0:15:51

Odoo:免费开源的钢铁冶金行业ERP管理系统

文 / 开源智造 Odoo亚太金牌服务 简介 Odoo免费开源ERP集成计质量设备大宗原料采购&#xff0c;备件设材全生命周期&#xff0c;多业务模式货控销售&#xff0c;全要素追溯单品&#xff0c;无人值守计量物流&#xff0c;大宗贸易交易和精细化成本管理等方案&#xff1b;覆盖…...

编程日记 2024/11/12 0:14:50

33.Redis多线程

1.Redis队列与Stream Redis5.0 最大的新特性就是多出了一个数据结构 Stream&#xff0c;它是一个新的强大的支持多播的可持久化的消息队列。 Redis Stream 的结构如上图所示,每一个Stream都有一个消息链表&#xff0c;将所有加入的消息都串起来&#xff0c;每个消息都有一个唯…...

编程日记 2024/11/12 0:10:45

【Python】解析 XML

1、Python 对 XML 的解析 1.1 SAX (simple API for XML ) SAX 解析器使用事件驱动模型&#xff0c;通过在解析XML的过程中触发一个个的事件并调用用户定义的回调函数来处理XML文件。 xml.sax 模块牺牲了便捷性来换取速度和内存占用。 事件驱动指一种基于回调&#xff08;ca…...

编程日记 2024/11/12 0:09:42

【复平面】-复数相乘的几何性质

文章目录 从数学上证明1. 计算乘积 z 1 ⋅ z 2 z_1 \cdot z_2 z1​⋅z2​2. 应用三角恒等式3. 得出结果 从几何角度证明1.给出待乘的复数 u i u_i ui​2.给出任意复数 l l l3.复数 l l l 在不同坐标轴下的表示图 首先说结论&#xff1a; 在复平面中&#xff0c;两个复数&a…...

编程日记 2024/11/12 0:08:42

为什么ta【给脸不要脸】：利他是一种选择，善良者的自我救赎与智慧策略

你满腔热忱&#xff0c;他却视而不见&#xff1b; 你伸出援手&#xff0c;他却恩将仇报&#xff1b; 你谦让包容&#xff0c;他却得寸进尺&#xff1b; 你善意提拔&#xff0c;他却并不领情&#xff0c;反而“给脸不要脸”。 所有人都曾被这种“好心当成驴肝肺”遭遇内耗&a…...

编程日记 2024/11/12 0:07:40

mysql 配置文件 my.cnf 增加 lower_case_table_names = 1 服务启动不了的原因

原因&#xff1a;在MySQL8.0之后的版本&#xff0c;只允许在数据库初始化时指定&#xff0c;之后不允许修改了 mysql 配置文件 my.cnf 增加 lower_case_table_names 1 服务启动不了 报错信息&#xff1a;Job for mysqld.service failed because the control process exited …...

编程日记 2024/11/12 0:04:38

SIwave：释放 SIwizard 求解器的强大功能

SIwave 是一种电源完整性和信号完整性工具。SIwizard 是 SIwave 中 SI 分析的主要工具&#xff0c;也是本博客的主题。 SIwizard 用于研究 RF、clock 和 control traces 的信号完整性。该工具允许用户进行瞬态分析、眼图分析和 BER 计算。用户可以将 IBIS 和 IBIS-AMI 模型添加…...

编程日记 2024/11/12 0:03:36

强化学习不愧“顶会收割机”！2大创新思路带你上大分，毕业不用愁！

强化学习之父Richard Sutton悄悄搞了个大的&#xff0c;提出了一个简单思路&#xff1a;奖励聚中。这思路简单效果却不简单&#xff0c;等于是给几乎所有的强化学习算法上了一个增强buff&#xff0c;所以这篇论文已经入选了首届强化学习会议&#xff08;RLC 2024&#xff09;&a…...

编程日记 2024/11/12 0:00:33

mac 修改启动图图标数量

调整每行显示图标数量&#xff1a; defaults write com.apple.dock springboard-rows -int 7 调整每列显示的数量 defaults write com.apple.dock springboard-columns -int 8 最后重置一下启动台 defaults write com.apple.dock ResetLaunchPad -bool TRUE;killall Dock 其…...

编程日记 2024/11/11 23:58:31

为什么需要建设工程项目管理？工程项目管理有哪些亮点功能？

在建筑行业&#xff0c;项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升&#xff0c;传统的管理模式已经难以满足现代工程的需求。过去&#xff0c;许多企业依赖手工记录、口头沟通和分散的信息管理&#xff0c;导致效率低下、成本失控、风险频发。例如&#…...

编程新知 2025/12/22 19:40:26

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案&#xff0c;允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...

编程新知 2025/12/21 3:41:09

【Zephyr 系列 10】实战项目：打造一个蓝牙传感器终端 + 网关系统（完整架构与全栈实现）

🧠关键词：Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者：希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数：约 5200 字 ✨ 项目总览 在物联网实际项目中，**“终端 + 网关”**是…...

编程新知 2025/12/20 14:47:54

Rust 异步编程

Rust 异步编程 引言 Rust 是一种系统编程语言，以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天，异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...

编程新知 2025/11/17 18:58:56

技术栈RabbitMq的介绍和使用

目录 1. 什么是消息队列&#xff1f;2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...

编程新知 2025/12/15 11:24:02

七、数据库的完整性

七、数据库的完整性 主要内容 7.1 数据库的完整性概述 7.2 实体完整性 7.3 参照完整性 7.4 用户定义的完整性 7.5 触发器 7.6 SQL Server中数据库完整性的实现 7.7 小结 7.1 数据库的完整性概述 数据库完整性的含义 正确性 指数据的合法性 有效性 指数据是否属于所定…...

编程新知 2025/12/23 9:48:01

解析奥地利 XARION激光超声检测系统：无膜光学麦克风 + 无耦合剂的技术协同优势及多元应用

在工业制造领域&#xff0c;无损检测&#xff08;NDT)的精度与效率直接影响产品质量与生产安全。奥地利 XARION开发的激光超声精密检测系统&#xff0c;以非接触式光学麦克风技术为核心&#xff0c;打破传统检测瓶颈&#xff0c;为半导体、航空航天、汽车制造等行业提供了高灵敏…...

编程新知 2025/12/24 20:37:35

如何配置一个sql server使得其它用户可以通过excel odbc获取数据

要让其他用户通过 Excel 使用 ODBC 连接到 SQL Server 获取数据&#xff0c;你需要完成以下配置步骤&#xff1a; ✅ 一、在 SQL Server 端配置&#xff08;服务器设置&#xff09; 1. 启用 TCP/IP 协议 打开 “SQL Server 配置管理器”。导航到&#xff1a;SQL Server 网络配…...

编程新知 2025/8/25 19:37:12

高考志愿填报管理系统---开发介绍

高考志愿填报管理系统是一款专为教育机构、学校和教师设计的学生信息管理和志愿填报辅助平台。系统基于Django框架开发&#xff0c;采用现代化的Web技术&#xff0c;为教育工作者提供高效、安全、便捷的学生管理解决方案。 ## &#x1f4cb; 系统概述 ### &#x1f3af; 系统定…...

编程新知 2025/12/24 23:37:15

【51单片机】4. 模块化编程与LCD1602Debug

1. 什么是模块化编程 传统编程会将所有函数放在main.c中&#xff0c;如果使用的模块多&#xff0c;一个文件内会有很多代码&#xff0c;不利于组织和管理 模块化编程则是将各个模块的代码放在不同的.c文件里&#xff0c;在.h文件里提供外部可调用函数声明&#xff0c;其他.c文…...

编程新知 2025/12/25 12:34:37