webpack 的 Loader 和 Plugin 的区别,常见的 loader 和 plugin 有哪些?

结论先行: 

1、 Loader 和 Plugin 的区别

Loader 也叫做就是“加载器”,因为 webpack 原生只能解析 js 文件,而对于其他类型文件,则需要借助 loader。所以 loader 的作用就是实现对不同格式文件的解析和处理,例如把 ES6 转换成 ES5,TypeScript 转换为 JavaScript等,使其能够添加到依赖关系中。

Plugin 就是我们常说的"插件"。主要是扩展 webpack 的功能,增加额外的构建任务。例如打包优化、环境变量注入、优化构建速度等,它们会运行在 webpack 的不同阶段(钩子 / 生命周期),贯穿了 webpack 整个编译周期。

2、 常见的 loader 和 plugin 有哪些?

常见的 loader: 

css-loader:处理 CSS 文件,使其能够在 JavaScript 模块中使用。

 加载 CSS,支持模块化、压缩、文件导入等特性;

style-loader:将解析后的 css, 用 style 标签挂载到页面的 head 标签中;

babel-loader:把 ES6+ 转换成 ES5;

file-loader:将文件复制到输出目录,在代码中通过相对路径去引用输出的文件 (处理图片和字体);

url-loader:与 file-loader 类似,区别是用户可以设置一个阈值,大于阈值会交给 file-loader处理,小于阈值时以 base64 的⽅式把⽂件内容注⼊到代码中去(处理图片和字体);

eslint-loader:通过 ESLint 检查 JavaScript 代码;

image-loader:加载并且压缩图片文件;

常见的 plugin:

html-webpack-plugin生成 HTML 文件,并自动将打包生成的 JS、CSS 文件注入到 HTML 文件中。

mini-css-extract-plugin分离样式文件,将 CSS 提取到单独的⽂件中,⽀持按需加载

(替代extract-text-webpack-plugin); 

terser-webpack-plugin: 支持压缩 ES6 代码(Webpack4); 

webpack-bundle-analyzer可视化 webpack 输出文件的体积;

webpack-parallel-uglify-plugin:多进程执行代码压缩,提升构建速度

clean-webpack-plugin: 在每次构建前清理输出目录,避免旧文件残留。

uglifyjs-webpack-plugin:压缩 JavaScript 代码,减小文件体积 (Webpack4 以前);

optimize-css-plugin:压缩 CSS;

define-plugin:定义环境变量;

允许在编译时创建配置的全局对象; (Webpack4 之后指定 mode 会自动配置)

是一个 webpack 内置的插件,不需要安装 

copy-webpack-plugin:将静态文件复制到输出目录。

如 Vue 的打包过程中,如果我们将一些文件放到 public 的目录下,那么这个目录会被复制到 dist 文件夹中 

具体解析:

1、Loader 

Webpack 中 loader 的作用是什么?常用 loader 有哪些?-CSDN博客

Loader 直译为"加载器"。

Webpack 将一切文件视为模块,但是 Webpack 原生是只能解析 js 文件,如果想将其他文件也打包的话,就会用到 loader

所以 loader 的作用是让 webpack 拥有了加载和解析非 JavaScript 文件 的能力。

2、Plugin

Webpack 中 Plugin 的作用是什么?常用 plugin 有哪些?-CSDN博客

Plugin 直译为"插件"。

Plugin 可以扩展 webpack 的功能,让 webpack 具有更多的灵活性。

在 Webpack 运行的生命周期中会广播出许多事件,Plugin 可以监听这些事件,在合适的时机通过 Webpack 提供的 API 改变输出结果。

3、不同的用法:

Loader module.rules 中配置,也就是说他作为模块的解析规则而存在。

每个配置项包含了一个或多个规则对象,规定了哪些文件需要经过哪些 loader 进行处理。 

类型为数组,每一项都是一个 Object,里面描述了对于什么类型的文件(test),使用什么加载 (loader) 和使用的参数(options

Plugin 在 plugins 中单独配置。

类型为数组,每一项是一个 plugin 的实例,参数都通过构造函数传入。

4、总结

总结起来,loader 用于处理模块的转换工作,而 plugin 则用于扩展 webpack 的功能,增加额外的构建任务。

它们在 webpack 的配置文件中通过不同的配置项进行配置和使用。 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/134532.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用PCtoLCD2002提取字模

“模式”---“字符模式” LCD显示,汉字使用宋体还是比较好的,16*16是长、宽都是16个像素显示。

Lavarel异步队列的使用

系统为window 启动队列&#xff1a; php artisan queue:listen设置队列类 .env文件需设置&#xff1a;QUEUE_CONNECTIONredis <?phpnamespace App\Jobs;use Illuminate\Bus\Queueable; use Illuminate\Contracts\Queue\ShouldQueue; use Illuminate\Foundation\Bus\Disp…

Spark Core

Spark Core 本文来自 B站 黑马程序员 - Spark教程 &#xff1a;原地址 第一章 RDD详解 1.1 为什么需要RDD 分布式计算需要 分区控制shuffle控制数据存储、序列化、发送数据计算API等一系列功能 这些功能&#xff0c;不能简单的通过Python内置的本地集合对象&#xff08;如…

gitlab 设置 分支只读

一&#xff0c;设置master分支只读&#xff0c; 并且只有Maintainers 拥有合并权限。 二&#xff0c;设置成员权限 改为developer 三&#xff0c;邀请成员 点击右上角 Invite Members

冒泡排序算法的四种实现方式:C、C++、Java和Python

下面是冒泡排序算法的四种实现方式&#xff1a;C、C、Java和Python。 C语言实现&#xff1a; #include <stdio.h>void bubbleSort(int arr[], int n) {for (int i 0; i < n - 1; i) {for (int j 0; j < n - i - 1; j) {if (arr[j] > arr[j 1]) {int temp …

AVS3:双向梯度修正BGC

双向梯度修正&#xff08;Bi-directional Gradient Correction&#xff0c;BGC&#xff09;是利用双向参考块间的差值对预测值进行修正的技术。 BGC仅用于双向预测CU&#xff0c;设两个方向得到的单向预测值分别为pred0和pred1&#xff0c;修正前的双向预测值为predBI&#xf…

web —— html

Web —— css基础 1. HTML2. 基本HTML结构3. HTML常用标签3.1 文本相关标签3.2 HTML图像标签3.3 HTML超链接标签3.4 HTML表&#xff0c;单3.4.1 HTML表格3.4.2 HTML表单&#xff0c;输入框&#xff08;多选框&#xff0c;单选框&#xff09;下拉框 3.5 HTML分区标签3.5.1 div标…

LeetCode-94. 二叉树的中序遍历(C++)

目录捏 一、题目描述二、示例与提示三、思路四、代码 一、题目描述 给定一个二叉树的根节点 root &#xff0c;返回 它的 中序 遍历 。 二、示例与提示 示例 1&#xff1a; 输入&#xff1a; root [1,null,2,3] 输出&#xff1a; [1,3,2] 示例 2&#xff1a; 输入&#xf…

大数据毕业设计选题推荐-营业厅营业效能监控平台-Hadoop-Spark-Hive

✨作者主页&#xff1a;IT毕设梦工厂✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Py…

初识Java 17-2 反射

目录 转型前检查 构建例子&#xff1a;生成层次结构 优化Creator&#xff1a;使用类字面量 优化PetCounter&#xff1a;动态验证类型 更通用的递归计数 注册工厂 本笔记参考自&#xff1a; 《On Java 中文版》 转型前检查 当我们使用传统的类型转换&#xff0c;例如&…

Java封装BufferedImage与base64互转方法

一、BufferedImage转base64 /*** BufferedImage 编码转换为 base64* param bufferedImage* return*/private static String BufferedImageToBase64(BufferedImage bufferedImage) {ByteArrayOutputStream bao new ByteArrayOutputStream();//io流try {ImageIO.write(buffered…

【系统架构设计】架构核心知识: 5 系统安全性与保密性设计

目录 一 信息安全基础 1 信息安全的基本要素 2 信息安全的范围 3 网络安全

支付卡行业(PCI)PIN安全要求和测试程序 7个控制目标、33个要求及规范性附录ABC 密钥注入-PCI认证-安全行业基础篇4

概述 用于在ATM和POS终端进行在线和离线支付卡交易处理期间&#xff0c;对个人身份号码&#xff08;PIN&#xff09;数据进行安全管理、处理和传输。 该标准具体包括 7 个控制目标和 33 个安全要求&#xff0c; 标准的结构分为标准主体部分&#xff0c;标准附录&#xff08;N…

windows查看端口号占用,并杀死进程

1、查看所有运行的端口&#xff1a; netstat -ano 2、查看被占用端口对应的 PID netstat -aon|findstr "8081" 回车执行该命令&#xff0c;最后一串数字就是 PID进程号, 这里是 19232。 3、查看指定 PID 的进程 tasklist|findstr "19232" 回车执行该…

[NLP] 使用Llama.cpp和LangChain在CPU上使用大模型

一 准备工作 下面是构建这个应用程序时将使用的软件工具: 1.Llama-cpp-python 下载llama-cpp, llama-cpp-python [NLP] Llama2模型运行在Mac机器-CSDN博客 2、LangChain LangChain是一个提供了一组广泛的集成和数据连接器&#xff0c;允许我们链接和编排不同的模块。可以常…

Ubuntu websocket程序

转自&#xff1a;C/C编程&#xff1a;WebSocketpp&#xff08;Linux Clion boostAsio&#xff09;_websocket-CSDN博客 目前自己使用的&#xff1a; #include <functional> #include <mutex> #include <set> #include <thread>#include <websock…

vue sass-loader,webpack安装卸载操作命令

检查 node-sass 的可用版本&#xff1a;运行下面的命令&#xff0c;查看 node-sass 的可用版本列表。 查看 npm view node-sass versions卸载 npm uninstall node-sass安装指定版本 npm install node-sass4.14.1安装最新版本 npm install sass-loaderlatest如果没有指定特定…

【ARM 安全系列介绍 1 -- 奇偶校验与海明码校验详细介绍】

文章目录 奇偶校验介绍奇偶校验 python 实现奇偶校验C代码实现 海明码详细介绍 奇偶校验介绍 奇偶校验是一种错误检测方法&#xff0c;广泛应用于计算机内部以及数据通信领域。其基本原理是为了使得一组数据&#xff08;通常是一字节8位&#xff09;中的“1”的个数为偶数或奇…

Python实战 | 使用 Python 的日志库(logging)和 pandas 库对日志数据进行分析

专栏集锦&#xff0c;大佬们可以收藏以备不时之需 Spring Cloud实战专栏&#xff1a;https://blog.csdn.net/superdangbo/category_9270827.html Python 实战专栏&#xff1a;https://blog.csdn.net/superdangbo/category_9271194.html Logback 详解专栏&#xff1a;https:/…

【今日文章】:如何用css 实现星空效果

【今日文章】&#xff1a;如何用css 实现星空效果 需求实现tips: 需求 用CSS 实现星空效果的需求&#xff1a; 屏幕上有“星星”&#xff0c;且向上移动。移动的时候&#xff0c;动画效果要连贯&#xff0c;不能出现闪一下的样子。 实现 这里我们需要知道&#xff0c;“星星”是…