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

谈谈 Webpack 中的 Loader 和 Plugin，它们的区别是什么？

news 来源：原创 2025/7/19 9:01:16

Webpack Loader与Plugin深度解析

作为前端工程化的核心工具，Webpack的Loader和Plugin机制是其强大扩展能力的基石。

理解它们的差异和适用场景，是构建高效打包体系的关键。

我们将从底层原理到实际应用，深入剖析两者的区别。

核心概念对比

特性	Loader	Plugin
功能定位	模块内容转换器	构建流程扩展器
作用范围	单个文件级别	整个构建过程
配置方式	`module.rules`数组配置	`plugins`数组实例化
执行时机	模块加载阶段	整个构建生命周期
输出影响	修改模块源代码	影响整体输出结构

Loader工作机制与实战

基础示例：文件处理器

// webpack.config.js
module.exports = {module: {rules: [{test: /\.css$/,use: ['style-loader', // 将CSS注入DOM{loader: 'css-loader',options: {modules: true // 启用CSS模块化}},'postcss-loader' // 自动添加浏览器前缀]},{test: /\.(png|jpe?g)$/,type: 'asset/resource',generator: {filename: 'images/[hash][ext]' // 图片资源输出路径}}]}
};

关键特征：

链式调用（从后向前执行）
支持选项参数配置
可组合多个Loader处理同一文件类型

高级应用：自定义Loader

// markdown-loader.js
module.exports = function(source) {// 将Markdown转换为HTML字符串const marked = require('marked');return `module.exports = ${JSON.stringify(marked.parse(source))};`;
};// 配置使用
{test: /\.md$/,use: './markdown-loader.js'
}

开发建议：

保持Loader功能单一，遵循单一职责原则
合理使用缓存提升构建性能
处理二进制数据时使用raw-loader作为前置

Plugin工作机制与实战

基础示例：流程控制器

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { DefinePlugin } = require('webpack');module.exports = {plugins: [new HtmlWebpackPlugin({template: './src/index.html', // 自定义HTML模板minify: {collapseWhitespace: true // 生产环境压缩HTML}}),new DefinePlugin({API_BASE: JSON.stringify(process.env.API_URL) // 注入环境变量})]
};

核心能力：

访问compiler对象操作构建流程
通过hooks监听特定生命周期事件
修改输出内容及资源结构

高级应用：自定义Plugin

class FileListPlugin {apply(compiler) {compiler.hooks.emit.tapAsync('FileListPlugin', (compilation, callback) => {let filelist = '## 构建产物清单\n\n';// 遍历所有编译文件for (const [filename, asset] of Object.entries(compilation.assets)) {filelist += `- ${filename} (${asset.size()} bytes)\n`;}// 将清单插入输出compilation.assets['FILELIST.md'] = {source: () => filelist,size: () => filelist.length};callback();});}
}// 配置使用
plugins: [new FileListPlugin()]

开发建议：

使用Tapable API精确控制hook类型（sync/async）
避免在Plugin中执行耗时操作
合理处理compilation对象的缓存机制

日常开发实践指南

1. Loader优化策略

并行处理加速构建：

{test: /\.js$/,use: [{loader: 'thread-loader',options: {workers: 4 // 根据CPU核心数设置}},'babel-loader']
}

缓存配置示例：

{loader: 'babel-loader',options: {cacheDirectory: true // 启用文件系统缓存}
}

2. Plugin使用技巧

动态环境变量注入：

new webpack.DefinePlugin({'process.env': {BUILD_TIME: JSON.stringify(new Date().toISOString()),GIT_COMMIT: JSON.stringify(require('child_process').execSync('git rev-parse HEAD').toString().trim())}
})

资源压缩优化方案：

const CompressionPlugin = require('compression-webpack-plugin');plugins: [new CompressionPlugin({algorithm: 'brotliCompress',filename: '[path][base].br',threshold: 10240 // 10KB以上文件启用压缩})
]

常见问题与解决方案

1. Loader执行顺序问题

典型症状： CSS样式未生效
根因分析： Loader链式调用顺序错误
修复方案：

// 错误配置
use: ['css-loader', 'style-loader']// 正确配置（从右到左执行）
use: ['style-loader', 'css-loader']

2. Plugin生命周期冲突

典型症状： 资源文件缺失或重复
根因分析： 多个Plugin修改同一资源
调试方法：

compiler.hooks.compilation.tap('DebugPlugin', (compilation) => {compilation.hooks.optimize.tap('DebugPlugin', () => {console.log(Array.from(compilation._modules.keys()));});
});

3. 版本兼容性问题

典型症状： 升级Webpack后Plugin失效
应对策略：

检查Plugin是否支持当前Webpack版本
查看变更日志中的破坏性更新
使用适配层包装旧Plugin

// 兼容旧版插件示例
class LegacyPluginAdapter {apply(compiler) {compiler.plugin('old-hook', () => {new LegacyPlugin().deprecatedMethod();});}
}

架构设计启示

关注点分离原则
Loader专注模块内容转换，Plugin处理构建流程扩展，避免功能重叠
生命周期管理
Plugin通过Tapable系统精确控制执行时机，典型阶段包括：

初始化参数
开始编译
解析模块
生成产物
输出结果

性能优化平衡
在扩展功能时需考虑：

缓存有效性（文件hash对比）
并行处理可行性
增量构建支持

最佳实践总结

Loader使用准则

优先使用官方维护的Loader
复杂转换操作分解为多个Loader
通过exclude缩小处理范围

{test: /\.js$/,exclude: /node_modules/,loader: 'babel-loader'
}

Plugin实施规范

避免在开发环境启用生产优化Plugin
监控构建各阶段耗时
使用Stats分析工具审查输出

webpack --profile --json=stats.json

联合优化策略

配合使用cache-loader提升二次构建速度
采用DLLPlugin预编译稳定依赖
实现按需加载优化首屏性能

const DashboardPlugin = require('webpack-dashboard/plugin');
plugins: process.env.NODE_ENV === 'development' ? [new DashboardPlugin()
] : [];

理解Loader和Plugin的协作机制，能够帮助开发者构建出既灵活又高效的前端工程化体系。

随着Webpack的持续演进，建议定期关注以下方向：

持久化缓存策略优化
模块联邦等新型架构模式
构建性能分析工具链
与Vite等新工具的协同方案

通过持续实践和经验积累，开发者可以更好地驾驭Webpack的扩展能力，

打造出适应复杂业务场景的构建解决方案。

谈谈 Webpack 中的 Loader 和 Plugin，它们的区别是什么？

Webpack Loader与Plugin深度解析作为前端工程化的核心工具，Webpack的Loader和Plugin机制是其强大扩展能力的基石。理解它们的差异和适用场景，是构建高效打包体系的关键。我们将从底层原理到实际应用，深入剖析两者的区别。核心概念对比…...

编程日记 2025/7/19 9:01:16

C#单例模式

单例模式 (Singleton),保证一个类仅有一个实例，并提供一个访问它的全局访问点。通常我们可以让一个全局变量使得一个对象被访问，但它不能防止你实例化对个对象，一个最好的办法就是，让类自身负责保护它的唯一实例。这个类可以保证没…...

编程日记 2025/7/19 8:45:18

Oracle 数据库通过exp/imp工具迁移指定数据表

项目需求：从prod数据库迁移和复制2个表(BANK_STATE，HBS)的数据到uat数据库环境。数据库版本：Oracle Database 19c Enterprise Edition Release 19.0.0.0.0 迁移工具：客户端exp/imp工具 -- 执行命令从Prod数据库导出数据exp us…...

编程日记 2025/7/13 4:45:43

MongoDB 与 Elasticsearch 使用场景区别及示例

一、核心定位差异 ‌MongoDB‌ ‌定位‌：通用型文档数据库，侧重数据的存储、事务管理及结构化查询，支持 ACID 事务‌。‌典型场景‌： 动态数据结构存储（如用户信息、商品详情）‌。需事务支持的场景&#xf…...

编程日记 2025/7/18 13:42:57

PyTorch生成式人工智能实战：从零打造创意引擎

PyTorch生成式人工智能实战：从零打造创意引擎 0. 前言1. 生成式人工智能1.1 生成式人工智能简介1.2 生成式人工智能技术 2. Python 与 PyTorch2.1 Python 编程语言2.2 PyTorch 深度学习库 3. 生成对抗网络3.1 生成对抗网络概述3.2 生成对抗网络应用 4. Transformer4…...

编程日记 2025/7/15 23:44:46

蓝桥杯高频考点——二分（含C++源码）

二分基本框架整数查找（序列二分的模版题建议先做）满分代码及思路solution 子串简写满分代码及思路solution 1（暴力模拟双指针70分）solution 2（二分 AC） 管道满分代码及思路样例解释与思路分析solution 最…...

编程日记 2025/7/19 8:55:52

VUE3项目VITE打包优化

VUE3项目VITE打包优化代码加密依赖配置效果对比图自动导入依赖配置代码压缩依赖配置效果对比图图片压缩依赖配置效果对比图字体压缩总结与实践运用效果代码加密依赖 npm install -D vite-plugin-bundle-obfuscator配置 import vitePluginBundleObfuscator from "…...

编程日记 2025/7/19 9:00:13

IP 分片重组与 TCP 会话重组

1. IP 分片重组（IP Fragmentation & Reassembly） （1）分片原因当 IP 数据包长度超过 MTU（Maximum Transmission Unit）（如以太网默认 1500 字节）时，路由器或发送端会…...

编程日记 2025/7/19 1:14:13

《Python实战进阶》No34：卷积神经网络（CNN）图像分类实战

第34集：卷积神经网络（CNN）图像分类实战摘要卷积神经网络（CNN）是计算机视觉领域的核心技术，特别擅长处理图像分类任务。本集将深入讲解 CNN 的核心组件（卷积层、池化层、全连接层）…...

编程日记 2025/7/17 16:50:38

【Django】教程-1-安装+创建项目+目录结构介绍

欢迎关注我！后续会更新django教程。一周2-3更，欢迎跟进，本周会更新第一个Demo的单独一个模块的增删改查【Django】教程-4-一个增删改查的Demo【Django】教程-2-前端-目录结构介绍【Django】教程-3-数据库相关介绍 1.项目创建 1.1 安装 Djan…...

编程日记 2025/7/19 8:48:29

力扣DAY29 | 热100 | 删除链表的倒数第N个结点

前言中等 √ 链表心得：考虑好边界情况。题目给你一个链表，删除链表的倒数第 n 个结点，并且返回链表的头结点。示例 1： 输入：head [1,2,3,4,5], n 2 输出：[1,2,3,5]示例 2： 输入&#…...

编程日记 2025/7/19 8:44:15

渗透测试过-关于学习Token、JWT、Cookie等验证授权方式的总结

关于学习Token、JWT、Cookie等验证授权方式的总结目录一、为什么Cookie无法防止CSRF攻击，而Token可以？ 二、为什么无论采用Cookie-session的方式，还是Token（JWT）的方式，在一个浏览器里，同一个…...

编程日记 2025/7/15 13:11:28

C#从入门到精通（3）

目录第九章窗体 （1）From窗体 （2）MDI窗体 （3）继承窗体第十章控件 （1）控件常用操作 （2）Label控件 （3）Button控件 &…...

编程日记 2025/7/19 1:11:26

greenhill编译出现：3201原因错误

ecom800: 21Mar25 16:26:45.609351: No licenses available for ecom800 Reason: ecom800 (3201): The License Manager cannot be contacted. 解决方式：重新加载lincese驱动。检查是否安装正确: 检查驱动是否正确识别： 以上检查都正常&#xff0c…...

编程日记 2025/7/16 4:31:22

Docker 快速入门指南

Docker 快速入门指南 1. Docker 常用指令 Docker 是一个轻量级的容器化平台，可以帮助开发者快速构建、测试和部署应用程序。以下是一些常用的 Docker 命令。 1.1 镜像管理 # 搜索镜像 docker search <image_name># 拉取镜像 docker pull <image_name>…...

编程日记 2025/7/14 11:48:32

RISC-V AIA学习2---IMSIC

我在学习文档这章时，对技术术语不太理解，所以用比较恰当的比喻来让自己更好的理解。比较通俗的理解： 将 RISC-V 系统比作一个工厂： hart → 工厂的一条独立生产线IMSIC → 每条生产线配备的「订单接收员」MSI 中断 → 客户通过…...

编程日记 2025/7/15 21:01:37

C#基础学习（五）函数中的ref和out

1. 引言：为什么需要ref和out？ 问题背景：函数参数默认按值传递，值类型在函数内修改不影响外部变量；引用类型重新赋值时外部对象不变。核心作用：允许函数内部修改外部变量的值，实现“双向传参…...

编程日记 2025/7/13 16:01:56

【每日算法】Day 9-1：贪心算法精讲——区间调度与最优选择（C++实现）

掌握高效决策的核心思想！今日深入解析贪心算法的底层逻辑，聚焦区间调度与最优选择两大高频场景，结合大厂真题与严谨证明，彻底掌握“局部最优即全局最优”的算法哲学。一、贪心算法核心思想贪心算法（Greedy Algorit…...

编程日记 2025/7/16 18:44:46

Netty源码—8.编解码原理二

大纲 1.读数据入口 2.拆包原理 3.ByteToMessageDecoder解码步骤 4.解码器抽象的解码过程总结 5.Netty里常见的开箱即用的解码器 6.writeAndFlush()方法的大体步骤 7.MessageToByteEncoder的编码步骤 8.unsafe.write()写队列 9.unsafe.flush()刷新写队列 10.如何把对象…...

编程日记 2025/7/18 4:15:03

【踩坑系列】使用httpclient调用第三方接口返回javax.net.ssl.SSLHandshakeException异常

1. 踩坑经历最近做了个需求，需要调用第三方接口获取数据，在联调时一直失败，代码抛出javax.net.ssl.SSLHandshakeException异常， 具体错误信息如下所示： javax.net.ssl.SSLHandshakeException: sun.security.validat…...

编程日记 2025/7/15 8:19:23

双目云台摄像头全方位监控方案

双目云台摄像头是一种具有两个镜头的摄像头设备，通常配备云台功能，能够实现水平和垂直方向的旋转，从而提供全方位的监控视角： 一、工作原理与特点工作原理 ：双目云台摄像头利用仿生学原理，通过两个标定后的…...

编程日记 2025/7/19 1:10:31

测谎仪策略思路

来源:【东吴金工金工专题】“高频价量相关性拥抱CTA”系列研究（四）：CPV因子期货版3.0—CPV测谎机原创高子剑量化邻距离 2024年09月20日 14:37 该报告主要介绍了“高频价量相关性拥抱CTA”系列研究中CPV因子期货版的相关内容，…...

编程日记 2025/7/17 8:13:08

2025年移动端开发性能优化实践与趋势分析

启动速度优化本质：缩短首次可见帧渲染时间。方法： iOS：利用Core ML本地模型轻量化部署，减少云端等待。Android：强制启用SplashScreen API，通过setKeepOnScreenCondition控制动画时长。冷启动需将耗时操…...

编程日记 2025/7/18 23:52:37

VScode-i18n-ally-Vue

参考这篇文章，做Vue项目的国际化配置，本篇文章主要解释，下载了i18n之后，该如何对Vscode进行配置 https://juejin.cn/post/7271964525998309428 i18n Ally全局配置项 Vscode中安装i18n Ally插件，并设置其配置项&#…...

编程日记 2025/7/14 20:53:03

vue vue3 走马灯Carousel

背景： 在项目中需要展示多张图片，但在页面上只有一张图片的有限位置，此时考虑使用轮播图实现多张图片的展示。element组件官网有走马灯Carousel的组件详细介绍。实现效果： 官网链接：点击跳转核心代码： …...

编程日记 2025/7/16 17:52:57

Android设计模式之Builder模式

一、定义：将一个复杂对象的构建与它的表示分离，使得同样的构建过程可以创建不同的表示。二、核心思想： 分离构造与表示：将对象的构建过程（如参数组合、校验逻辑）与对象本身分离。链式调用：通…...

编程日记 2025/7/16 12:12:31

【时时三省】(C语言基础)关系运算符和关系表达式

山不在高，有仙则名。水不在深，有龙则灵。 ----CSDN 时时三省在if语句中对关系表达式disc > 0进行判断。其中的“>”是一个比较符，用来对两个数值进行比较。在C语言中，比较符（或称比较运算符）称为关…...

编程日记 2025/7/18 18:34:46

运算放大器（二）运算放大器的选型与应用

1.运算放大器的工艺决定Vos和Ib 2.TI放大器的命名规律 3.TI精密放大器家族 4.精密运放的选型指南 5.高共模抑制比放大器 6.TI其他的精密放大器 7.选型时需考虑的问题 8.TI精密运放选型实例先确定供电电压 9.确定放大器的步骤参考： 注：本文出自对b…...

编程日记 2025/7/15 14:38:16

vulhub靶场jangow-01-1.0.1

启动靶机时点shift停在这个界面点e进入编辑页面，把ro改成rw signie init/bin/bash Ctrlx保存，ip a查看网卡信息 vim /etc/network/interfaces 把enp0s17改为ens33，保存退出重启靶机，nmap扫ip ip为192.168.93.179 nmap扫端口扫…...

编程日记 2025/7/17 7:43:41

android 一步完成 aab 安装到手机

家人们谁懂！在 Android 系统安装 aab 应用超麻烦。满心期待快速体验，却发现 aab 无法直装，得先转为 apks 格式，这过程复杂易错。好不容易转好，还得安装 apks，一番折腾，时间与耐心全耗尽。别愁&a…...

编程日记 2025/7/16 14:56:35

mysqlworkbench导入.sql文件

1、MySQL Workbench 新建数据库或者在左侧导航栏的 Schemas 区域右键选择 Create Schema...输入数据库名称（例如 mydatabase），点击 Apply确认创建，点击 Finish 2、选择目标数据库在左侧导航栏的 Schemas 列表中&a…...

编程日记 2025/7/16 15:41:42

pyqt 信号与槽

PySide6 信号与槽机制详解引言 PySide6 是 Qt for Python 的官方绑定库，为 Python 提供了强大的 GUI 开发能力。其中，信号与槽（Signals and Slots） 机制是 Qt 事件处理系统的核心，它允许对象之间进行松耦合的通信&a…...

编程日记 2025/7/17 15:47:47

深入探索C++：从基础到实践

目录引言一、C 基础语法与特性 （一）命名空间（Namespace） 单独使用嵌套使用调用形式 （二）输入输出流（I/O Streams） （三）变量作用域二、C 的…...

编程日记 2025/7/16 4:32:11

从零开始完成冒泡排序（0基础）——C语言版

文章目录前言一、冒泡排序的基本思想二、冒泡排序的执行过程（一）第一轮排序（二）第二轮排序（三）第三轮排序（四）第四轮排序三、冒泡排序的代码实现（C语言）&am…...

编程日记 2025/7/16 15:56:24

Echars插入的柱状图条形图，鼠标放在图上显示坐标值

只需要将axiosPointer改为cross axisPointer.type支持类型及作用： line：默认直线型指向线shadow：显示坐标轴方向的阴影区域cross：交叉线（横向纵向双线）none：不显示指向器inside：结合…...

编程日记 2025/7/17 14:55:22

机械臂如何稳稳上桌？Mujoco场景修改实操

视频讲解： 机械臂如何稳稳上桌？Mujoco场景修改实操前面《常见机械臂模型不用找！Mujoco这儿都有！》中介绍的mujoco-menagerie中机械臂大多都是base_link放在地上的，这些场景往往和真实的场景对应不上，比如机…...

编程日记 2025/7/14 5:08:04

金融级密码管理器——抗内存扫描的密钥保险箱

目录金融级密码管理器 —— 抗内存扫描的密钥保险箱一、模块概述与设计背景二、技术原理与设计目标2.1 关键安全原理2.2 设计目标三、系统架构设计3.1 系统架构图（Mermaid示意图）四、关键技术与安全策略4.1 密钥分割与加密存储4.2 动态内存随机化技术4.3 内存扫描检测与自动…...

编程日记 2025/7/14 5:17:30

如何查看 SQL Server 的兼容性级别

在 SQL Server 中，兼容性级别是一个非常重要的设置，它决定了数据库在特定版本的 SQL Server 中运行时所使用的行为和功能。不同版本的 SQL Server 可能会在 SQL 查询优化、索引、语法、错误处理等方面有差异，因此，设置正确的兼容性…...

编程日记 2025/7/16 5:14:03

AI for CFD入门指南（传承版）

AI for CFD入门指南前言适用对象核心目标基础准备传承机制 AI for CFDLibtorch的介绍与使用方法PytorchAutogluon MakefileVscodeOpenFOAMParaviewGambit 前言适用对象新加入课题组的硕士/博士研究生对AICFD交叉领域感兴趣的本科生实习生需要快速上手组内研究工具的合作研…...

编程日记 2025/7/17 14:58:34

人工智能与网络安全

目录 1、人工智能的安全和安全的人工智能各有什么含义，如何解决 2、当人工智能技术应用于某一安全领域，会对该领域的攻守双方带来哪些机遇与挑战 3、ChatGPT原理、ChatGPT的缺陷 ChatGPT的缺陷 4、人工智能与算力，风险挑战应对 5、人…...

编程日记 2025/7/15 8:08:02

GPIO输出实验，控制LED灯

1.实验工具：FSMP1A开发板核心板： 拓展板： 2.实验要求：编写汇编程序，实现三盏灯流水程序代码： .text .global _start _start: 将RCC_MP_AHB4ENSET寄存器第4位设置为1，使能GPIO外设时钟 …...

编程日记 2025/7/18 5:01:34

小区团购管理设计与实现(代码+数据库+LW)

摘要传统办法管理信息首先需要花费的时间比较多，其次数据出错率比较高，而且对错误的数据进行更改也比较困难，最后，检索数据费事费力。因此，在计算机上安装小区团购管理软件来发挥其高效地信息处理的作用&#xff0…...

编程日记 2025/7/16 9:03:47

How to use pgbench to test performance for PostgreSQL?

pgbench 是一个用于测试 PostgreSQL 数据库性能的基准测试工具。通过模拟多个客户端并发执行 SQL 查询，它可以帮助你评估数据库的性能。以下是使用 pgbench 的基本步骤： 安装 pgbench pgbench 是 PostgreSQL 的一部分，因此在安装 PostgreSQ…...

编程日记 2025/7/14 1:48:56

dbeaver插入mongodb数据日期默认使用ISODate处理，但是插入数据以后实际上是ISODate(2025-03-03T03:25:19.640Z)字符串 INSERT INTO xxx.aaa (_id, chatId, buddyId, pId, lastChatId, inspiration, createTime, modelType, version, selectedInspiration, _class)…...

编程日记 2025/7/17 18:40:36

wgcloud怎么实现服务器或者主机的远程关机、重启操作吗

可以，WGCLOUD的指令下发模块可以实现远程关机和重启使用指令下发模块，重启主机，远程关机，重启agent程序- WGCLOUD...

编程日记 2025/6/28 6:33:10

PrimeTime生成.lib竟暗藏PG添加Bug

在primeTime里生成lib，如何能带上相关的pg信息？ 这是一位群友的发问，就这个问题总结了下可能的原因和解决步骤： 概念 PrimeTime是Synopsys的静态时序分析工具，通常用于在设计的各个阶段进行时序验证。 1&#xff09…...

编程日记 2025/7/16 4:36:04

电话号码的字母组合组合总和II 回溯注意事项(Java)

电话号码的字母组合思路：多个循环可以考虑回溯。首先明确： 循环的宽度是多少，即从哪些区间取数（本题目中每个数字都是3个字母，都是从三个字母中取一个数，所以可以确定循环宽度就是每个数字对应的字符串…...

编程日记 2025/7/18 3:57:58

【软件工程】填空题

真题 2024-10 16.数据字典是用来定义_____中各个成分的具体含义的。 17.模块设计的基本原则是_____。 18.接口是操作的一个集合,其中每个操作描述了类、构件或子系统的一个_____。 19.耦合是指不同模块之间_____的度量。 20.RUP的突出特点是,它是一种以用况为驱动的、…...

编程日记 2025/7/15 6:46:42

回归——数学公式推导全过程

文章目录一、案例引入二、如何求出正确参数 1. 最速下降法 1）多项式回归 2）多重回归 2. 随机梯度下降法一、案例引入以Web广告和点击量的关系为例来学习回归，假设投入的广告费和点击量呈现下图对应关系。思考：如果花了…...

编程日记 2025/7/17 5:32:47

线程池详解：在SpringBoot中的最佳实践

线程池详解：在SpringBoot中的最佳实践引言在Java并发编程中，线程池是一种非常重要的资源管理工具，它允许我们在应用程序中有效地管理和重用线程，从而提高性能并降低资源消耗。特别是在SpringBoot等企业级应用中，正…...

编程日记 2025/7/17 10:55:40