【Webpack】预处理器 - 常用loader介绍
选用合适的loader来处理不同的资源和不同的功能,以下是一些主流的loader,但这并不是全部,因为每时每刻都可能有新的loader 发布到 npm上
babel-loader
babe-loader 用来处理ES6+并将其编译为ESS,它使我们能够在最新的工程中使用最新语言特性,同时不必特别关注这些特性在不同平台的兼容问题
在安装时推荐使用以下命令:
npm install babel-loader /core /preset-env
在配置 babel-loader 时有一些需要注意的地方。请看下面的例子:
rules:[
{test: /\.js$/,exclude: /node_modules/,use:(loader: 'babel-loader',options:{cacheDirectory: truepresets: [['env',{modules; false,}]],},),
}
],
由于babel-loader通常属于对所有JS后缀文件设置的规则,所以需要在exclude中添加node_modules,否则会令 babel-loader 编译其中所有的模块,这将严重拖慢打包的速度,并且有可能改变第三方模块的原有行为。
对于babel-loader本身我们添加了cacheDirectory 配置项,它会启用缓存机制在重复打包未改变过的模块时防止二次编译,同样也会加快打包的速度。cacheDirector可以接收一个字符串类型的路径来作为缓存路径,这个值也可以为 true,此时其缓存目录会指向 node_modules/.cache/babel-loader
由于@babel/preset-env会将ES6 Module转化为CommonJS 的形式,这会导致 Webpack中的 tree-shaking 特性失效**@babel/preset-env的modules 配置项设置为false会禁用模块语的转化,而将ESModule的语法交给 Webpack 本身处理。**
ts-loader
ts-loader 与 babel-loader 的性质类似,它是用于连接Webpack 与 Typescript的模块。可使用以下命令进行安装:
npm install ts-loader typescript
Webpack 配置如下:
rules;[{test: /\.ts$/,use:'ts-loader',}
],
需要注意的是,Typescript本身的配置并不在ts-loader 中,而是必须要放在工程录下的tsconfig.json中。
通过 Typescript 和 ts-loader,我们可以实现代码类型检查。
html-loader
html-loader用于将HTML文件转化为字符串并进行格式化,这使得我们可以把一个HTML片段通过JS加载进来
安装命令如下:
npm install html-loader
Webpack配置如下
rules;[{test: /\.html$/,use:'html-loader',}
],
header.html将会转化为字符串,并通过 documentwrite 插人页面中
file-loader
file-loader 用于打包文件类型的资源,并返回其 publicPath。
安装命令如下:
npm install file-loader
Webpack配置如下
const path = require(path');
module.exports =(entry:'./app.js',output: {path: path.join(__dirname,'dist'),filename: 'bundle.js',},module:(rules:[{ test: /\.(png|jpg|gif)$/,use:'file-loader',}],},
};
4
上面我们对png、jpg、gif这类图片资源使用 file-loader,然后就可以在JS中加载图片了。
import avatarImage from './avatar.jpg';console.log(avatarImage);// c6f482ac9a1905e1d7d22caa909371fc.jpg
url-loader
url-loader 与 fle-loader 作用类似,唯一的不同在于用户可以设置一个文件大小阈值,当大于该阙傻时与 fle-loader一样返回 publicPath,而小于该值时则返回文件base64 形式编码。
安装命令如下:
npm install url-loader
Webpack 配置如下:
rules:[{test:/\.(png|jpg|gif)$/,use:{loader: 'url-loader',options:{limit: 10240,name: '[name].[ext]',publicPath: './assets-path/',}}}
]
url-loader 可接收与 file-loader 相同的参数,如name和 publicPath 等,同时也可以接收一个 limit 参数。
vue-loader
vue-loader 用于处理 vue 组件:
安装命令如下;
npm install vue-loader vue vue-template-compiler css-loader
Webpack配置如下
rules;[{test: /\.vue$/,use:'vue-loader',}
],
自定义 loader
有时会遇到现有 loader 无法很好满足需求的情况,这时就需要我们对其进行修改或者编写新的 loader。如前面代码所演示的一样,loader 本身其实非常简单,下面就从头实现一个loader
我们将实现一个loader,它会为所有JS文件启用产格模式,也就是说它会在文件头部加上如下代码:
'use strict'
在开发一个loader时,我们可以借助 npm/yarn 的软链能进行本地调试(当然之后可以考发布到 npm等)。下面让我们初始化这个loader并配置到工程中。
创建一个 force-strict-loader 目录,然后在该目录下执行 npm初始化命令
npm init -y
接着创建 index.js,也就是 loader 的主体
module.exports = function(content){var useStrictPrefix = '\'use strict\';\n\n';return useStrictPrefix + content;
}
现在我们可以在 Webpack 工程中安装并使用这个 loader了。
npm install <path-to-loader>/force-strict-loader
在 Webpack工程目录下使用相对路径安装,会在项目的node modules 中创建一个指向实际 force-strict-loader 目录的软链,也就是说之后我们可以随时修改 loader源码并软链且不需要重复安装了。
下面修改 Webpack 配置
module:{rules:[{test:/\.js$/,use: 'force-strict-loader'}]
}
我们将这个loder设置为对所有JS 文件生效。此时对该工程进行打包应该可以看到JS文件的头部都已经加上了启用严格模式的语句。
启用缓存
当文件输入和其依赖没有发生变化时,应该让 loader 直接使用存,而不
行转换的工作。在 Webpack 中可以使用 his.cacheable 进行控制,修改我们的
module.exports = function(content){if(this.cacheable){this.cacheable();}var useStrictPrefix = '\'use strict\';\n\n';return useStrictPrefix + content;
}
通过启用缓存可以加快 Webpack 打包速度,并且可保证相同的输人产生输出。
获取options
前文讲过,loader的配置项通过 use.options 传进来,如:
rules:[{test:/\.js$/,use: {loader:'force-strict-loader',options:{sourceMap: true}}}]
上面配置了一个配置项sourceMap,接下来要再loader中获取,要先安装一个依库loader-utils,安装命令如下:
npm install loader-utils
loader更新如下
var loaderUtils = require("loader-utils");
module.exports = function(content){if(this.cacheable){this.cacheable();}var options = loaderUtils.getOptions(this) || {};var useStrictPrefix = '\'use strict\';\n\n';return useStrictPrefix + content;
}
通过loaderUtils.getOptions可以获取到配置对象
source-map
source-map可以便于实际开发者在浏览器控制台查看源码。如果没有对source-map进行处理,最终也就无法生成正确的 map 文件,在浏览器的 dev tool中可能就会看到错乱的源码。
下面是支持了source-map特性后的版本
var loaderUtils = require("loader-utils");
var SourceNode = require("source-map").SourceNode;
var SourceMapConsumer = reuqire("source-map").SourceMapConsumer;
module.exports = function(content){if(this.cacheable){this.cacheable();}var useStrictPrefix = '\'use strict\';\n\n';return useStrictPrefix + content;var options = loaderUtils.getOptions(this) || {};if (options.sourceMap && sourceMap) (var currentRequest = loaderutils.getCurrentRequest(this);var node = SourceNode.fromStringWithsourceMap(content,new SourceMapConsumer(sourceMap));node.prepend(usestrictPrefix);var result = node.toStringWithSourceMap(( file: currentRequest ));var callback =this.async();callback(null,result.code,result.map.toJSON());}//不支持source-map情况return useStrictPrefix + content;
}
我们通过source-map这个库来对map进行操作,包括接收和消费之前的文件内容和source-map,对内容节点进行修改,最后产生新的source-map
在函数返回的时候要使用this.async获取 callback 函数(主要是为了一次性返回多个值)。callback函数的3个参数分别是抛出的错误、处理后的源码,以及source-map
相关文章:
【Webpack】预处理器 - 常用loader介绍
选用合适的loader来处理不同的资源和不同的功能,以下是一些主流的loader,但这并不是全部,因为每时每刻都可能有新的loader 发布到 npm上 babel-loader babe-loader 用来处理ES6并将其编译为ESS,它使我们能够在最新的工程中使用最…...
lodash 的 _.groupBy 函数是怎么实现的?
说在前面 🎈lodash的_.groupBy函数可以将一个数组按照给定的函数分组,返回一个新对象。该函数接收两个参数:第一个参数是要进行分组的数组,第二个参数是用于分组的函数。该函数会对数组中的每个元素进行处理,返回一个值…...

(2024,ViM,双向 SSM 骨干,序列建模)利用双向状态空间模型进行高效视觉表示学习
Vision Mamba: Efficient Visual Representation Learning with Bidirectional State Space Model 公和众和号:EDPJ(进 Q 交流群:922230617 或加 VX:CV_EDPJ 进 V 交流群) 目录 0.摘要 3. 方法 3.1. 基础知识 3.…...

docker容器和常用命令
1.什么是容器 容器是隔离的环境中运行的一个 进程 , 如果进程结束 , 容器就会停止. 细致: 容器的隔离环境 , 拥有自己的 ip 地址 , 系统文件 , 主机名 , 进程管理 , 相当于一个 mini的系统 2.容器 vs 虚拟机 3.Docker极速上手指南 #1.安装相关依赖. sudo yum install -y …...
【征服redis9】快速征服lua脚本
lua脚本,这个名字总让人想歪,不过老外发明名字,我们只能跟着叫了。这个脚本语言在redis里和Nginx里都有用,所以我们就来看一下。 目录 1 lua的介绍与说明 2 lua的基本语句体验 3.Lua的数据结构和高级特性 1 lua的介绍与说明 …...

vue3.2二次封装antd vue 中的Table组件,原有参数属性不变
vue3.2中的<script setup>语法 在项目中多处使用到表格组件,所以进行了一个基础的封装,主要是通过antd vue 中表格的slots配置项,通过配合插槽来进行封装自定义表格; 这次主要的一个功能是编辑之后变成input框 修改了之后变成完成发送请求重新渲染表格: 子…...
GBASE南大通用分享,如何修改可信上下文
在以下示例中,假设该可信上下文对象 appserver 存在并启用。以下的 ALTER TRUSTED CONTEXT 语句将 appserver 可信上下文对象的对象方式重置为 DISABLE。当其处于该方式时, appserver 可信上下文仍然存在,但是它不能用于存取数据库服务器。 …...

冻结Prompt微调LM: T5 PET (a)
T5 paper: 2019.10 Exploring the Limits of Transfer Learning with a Unified Text-to-Text Transformer Task: Everything Prompt: 前缀式人工prompt Model: Encoder-Decoder Take Away: 加入前缀Prompt,所有NLP任务都可以转化为文本生成任务 T5论文的初衷如…...
119 BFS和DFS解二叉树的所有路径
问题描述:给定一个二叉树,返回所有从根节点到叶子节点的路径。说明:叶子节点是指没有子节点的节点。 DFS求解:定义一个全局的链表,用来装所有的结果,通过DFS遍历,一旦遍历到当前节点没有子节点…...
SpringBoot缓存相关注解的使用
CacheConfig:主要用于配置该类中会用到的一些共用的缓存配置 Cacheable:主要方法的返回值将被加入缓存。在查询时,会先从缓存中获取,若不存在才再发起对数据库的访问 CachePut:主要用于数据新增和修改操作 CacheEvi…...

SpiderFlow爬虫平台漏洞利用分析(CVE-2024-0195)
1. 漏洞介绍 SpiderFlow爬虫平台项目中spider-flow-web\src\main\java\org\spiderflow\controller\FunctionController.java文件的FunctionService.saveFunction函数调用了saveFunction函数,该调用了自定义函数validScript,该函数中用户能够控制 functi…...

计算机网络-甘晴void学习笔记
计算机网络 计科210X 甘晴void 202108010XXX 文章目录 计算机网络期中复习1计算机网络和因特网1.1 因特网1.2 网络边缘1.3 网络核心1.4 分组交换的时延/丢包和吞吐量1.5 协议层次与服务模型 2 应用层原理2.1 应用层协议原理2.2 Web和Http2.3 因特网中的电子邮件2.4 DNS&#x…...

vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
文章目录 一、实现效果二、实现方法1、安装echarts插件2、获取省市json数据3、本例中data 数据4、吉林省地图的绘制5、柱状图样式6、设置柱状底部涟漪特效样式7、数据处理 三、示例代码已上传,去顶部可下载四、效果展示 一、实现效果 使用echarts实现省市地图绘制&…...

Android aar包集成与报错
Android Studio引用AAR的方式,分为gradle7.0之前与7.0之后 一、集成步骤 方法一: 1.将对应的xxx.aar包复制到项目的libs目录下(xxx代表需要引入的aar包名称) 2.然后在模块的build.gradle文件中配置implementation files(libs/lib…...

CentOS 7.9 安装图解
特特特别的说明 CentOS发行版已经不再适合应用于生产环境,客观条件不得不用的话,优选7.9版本,8.5版本次之,最次6.10版本(比如说Oracle 11GR2就建议在6版本上部署)! 引导和开始安装 选择倒计时结…...
Gitea Webhook报错 webhook.ALLOWED_HOST_LIST setting
Gitea Webhook报错 webhook.ALLOWED_HOST_LIST setting 登录到Gitea中,编辑app.ini vi /data/gitea/conf/app.ini [webhook] ALLOWED_HOST_LIST 你的IP地址示例 [webhook] ALLOWED_HOST_LIST 192.168.3.98...

SQL 最大连续合格次数 最大连胜记录次数 最大连败记录次数
有这样一个问题,工厂中要统计某个供应商送货检验的情况,依照其连续合格次数,决定是否免检,不使用游标或者循环,如何写这个sql。 此情景也可以用于统计连胜记录等 先要学习一下 窗函数LAG,指的是按分组和排…...
着色器语言GLSL学习
1 初步尝试 import { Scene, WebGLRenderer, OrthographicCamera, PlaneGeometry, ShaderMateria } from three.jsconst scene new Scene() const camera new OrthographicCamera(-1,1,1,-1,0.1, 10)const renderer new WebGLRenderer() renderer.setSize(window.innerWidt…...

C#: form 窗体的各种操作
说明:记录 C# form 窗体的各种操作 1. C# form 窗体居中显示 // 获取屏幕的宽度和高度 int screenWidth Screen.PrimaryScreen.Bounds.Width; int screenHeight Screen.PrimaryScreen.Bounds.Height;// 设置窗体的位置 this.StartPosition FormStartPosition.M…...

“尔滨”宠粉再升级!百亿像素VR冰雪盛宴
1月10日,由哈尔滨市委网信办、哈尔滨日报社主办,冰城客户端、哈尔滨新闻网承办的“激情迎亚冬,冰雪暖世界——2024年哈尔滨冰雪乐园”VR沉浸式体验产品正式上线。 如果你还没去过最近爆火出圈的“尔滨” ❄️这份哈尔滨冰雪景点VR❄️ 为你…...

label-studio的使用教程(导入本地路径)
文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...
python报错No module named ‘tensorflow.keras‘
是由于不同版本的tensorflow下的keras所在的路径不同,结合所安装的tensorflow的目录结构修改from语句即可。 原语句: from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后: from tensorflow.python.keras.lay…...
【生成模型】视频生成论文调研
工作清单 上游应用方向:控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...

VM虚拟机网络配置(ubuntu24桥接模式):配置静态IP
编辑-虚拟网络编辑器-更改设置 选择桥接模式,然后找到相应的网卡(可以查看自己本机的网络连接) windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置,选择刚才配置的桥接模式 静态ip设置: 我用的ubuntu24桌…...

推荐 github 项目:GeminiImageApp(图片生成方向,可以做一定的素材)
推荐 github 项目:GeminiImageApp(图片生成方向,可以做一定的素材) 这个项目能干嘛? 使用 gemini 2.0 的 api 和 google 其他的 api 来做衍生处理 简化和优化了文生图和图生图的行为(我的最主要) 并且有一些目标检测和切割(我用不到) 视频和 imagefx 因为没 a…...

基于Java+VUE+MariaDB实现(Web)仿小米商城
仿小米商城 环境安装 nodejs maven JDK11 运行 mvn clean install -DskipTestscd adminmvn spring-boot:runcd ../webmvn spring-boot:runcd ../xiaomi-store-admin-vuenpm installnpm run servecd ../xiaomi-store-vuenpm installnpm run serve 注意:运行前…...
深入理解Optional:处理空指针异常
1. 使用Optional处理可能为空的集合 在Java开发中,集合判空是一个常见但容易出错的场景。传统方式虽然可行,但存在一些潜在问题: // 传统判空方式 if (!CollectionUtils.isEmpty(userInfoList)) {for (UserInfo userInfo : userInfoList) {…...

Elastic 获得 AWS 教育 ISV 合作伙伴资质,进一步增强教育解决方案产品组合
作者:来自 Elastic Udayasimha Theepireddy (Uday), Brian Bergholm, Marianna Jonsdottir 通过搜索 AI 和云创新推动教育领域的数字化转型。 我们非常高兴地宣布,Elastic 已获得 AWS 教育 ISV 合作伙伴资质。这一重要认证表明,Elastic 作为 …...
在鸿蒙HarmonyOS 5中使用DevEco Studio实现指南针功能
指南针功能是许多位置服务应用的基础功能之一。下面我将详细介绍如何在HarmonyOS 5中使用DevEco Studio实现指南针功能。 1. 开发环境准备 确保已安装DevEco Studio 3.1或更高版本确保项目使用的是HarmonyOS 5.0 SDK在项目的module.json5中配置必要的权限 2. 权限配置 在mo…...

Matlab实现任意伪彩色图像可视化显示
Matlab实现任意伪彩色图像可视化显示 1、灰度原始图像2、RGB彩色原始图像 在科研研究中,如何展示好看的实验结果图像非常重要!!! 1、灰度原始图像 灰度图像每个像素点只有一个数值,代表该点的亮度(或…...