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

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

news 2025/9/16 20:59:33

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

Ubuntu系统下交叉编译openssl

一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机&#xff1a;Ubuntu 20.04.6 LTSHost&#xff1a;ARM32位交叉编译器&#xff1a;arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...

编程新知 2025/8/5 22:19:11

《Qt C++ 与 OpenCV：解锁视频播放程序设计的奥秘》

引言：探索视频播放程序设计之旅 在当今数字化时代，多媒体应用已渗透到我们生活的方方面面，从日常的视频娱乐到专业的视频监控、视频会议系统，视频播放程序作为多媒体应用的核心组成部分，扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上，用户都期望…...

编程新知 2025/9/9 10:11:47

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中&#xff0c;每个页面需要使用ref&#xff0c;onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入&#xff0c;需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

编程新知 2025/9/14 18:41:15

C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。

1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj&#xff0c;再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...

编程新知 2025/9/7 8:52:22

学习STC51单片机32（芯片为STC89C52RCRC）OLED显示屏2

每日一言 今天的每一份坚持&#xff0c;都是在为未来积攒底气。 案例&#xff1a;OLED显示一个A 这边观察到一个点&#xff0c;怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 &#xff1a; 如果代码里信号切换太快&#xff08;比如 SDA 刚变&#xff0c;SCL 立刻变&#…...

编程新知 2025/9/7 8:51:23

初探Service服务发现机制

1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能&#xff1a;服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源&#xf…...

编程新知 2025/9/2 19:56:38

Git 3天2K星标：Datawhale 的 Happy-LLM 项目介绍（附教程）

引言 在人工智能飞速发展的今天&#xff0c;大语言模型&#xff08;Large Language Models, LLMs&#xff09;已成为技术领域的焦点。从智能写作到代码生成&#xff0c;LLM 的应用场景不断扩展&#xff0c;深刻改变了我们的工作和生活方式。然而&#xff0c;理解这些模型的内部…...

编程新知 2025/9/2 3:21:36

人工智能--安全大模型训练计划：基于Fine-tuning + LLM Agent

安全大模型训练计划&#xff1a;基于Fine-tuning LLM Agent 1. 构建高质量安全数据集 目标&#xff1a;为安全大模型创建高质量、去偏、符合伦理的训练数据集&#xff0c;涵盖安全相关任务&#xff08;如有害内容检测、隐私保护、道德推理等&#xff09;。 1.1 数据收集 描…...

编程新知 2025/9/4 13:36:29

如何应对敏捷转型中的团队阻力

应对敏捷转型中的团队阻力需要明确沟通敏捷转型目的、提升团队参与感、提供充分的培训与支持、逐步推进敏捷实践、建立清晰的奖励和反馈机制。其中&#xff0c;明确沟通敏捷转型目的尤为关键&#xff0c;团队成员只有清晰理解转型背后的原因和利益&#xff0c;才能降低对变化的…...

编程新知 2025/9/7 8:49:35

多元隐函数 偏导公式

我们来推导隐函数 z z ( x , y ) z z(x, y) zz(x,y) 的偏导公式&#xff0c;给定一个隐函数关系&#xff1a; F ( x , y , z ( x , y ) ) 0 F(x, y, z(x, y)) 0 F(x,y,z(x,y))0 &#x1f9e0; 目标&#xff1a; 求 ∂ z ∂ x \frac{\partial z}{\partial x} ∂x∂z​、 …...

编程新知 2025/9/15 0:26:11