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

webpack自定义loader解析指定后缀名文件

news 文章来源：https://blog.csdn.net/qq_39583550/article/details/127061434 2024/10/31 1:21:05

案例： webpack自定义loader解析.chenjiang后缀名的文件

整体目录：
在这里插入图片描述

  • chenjiangLoader.js文件代码
// 正则匹配script标签中的内容
const REG = /<script>([\s\S]*)<\/script>/;module.exports = function (source) {const __source = source.match(REG);return __source && __source[1] ? __source[1] : source;
};
  • test.chenjiang文件代码
<script>export default {name: 'chenjiang',age: 24}
</script>
  • 配置webpack的loader
const path = require("path");module.exports = {entry: "./src/index.js",output: {path: path.resolve(__dirname, "dist"),filename: "bundle.js",},mode: "development",module: {rules: [{test: /\.chenjiang$/,use: [path.resolve(__dirname, "loader/chenjiangLoader.js")],},],},
};
  • 主入口文件代码
import Utils from "./test.chenjiang";console.log("自定义文件后缀名：", Utils.name);
  • 运行命令

前提要npm install webpack webpack-cli -D

npx webpack
  • 访问index.html文件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="application/javascript" src="../dist/bundle.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>

相关文章：

webpack自定义loader解析指定后缀名文件

案例&#xff1a; webpack自定义loader解析.chenjiang后缀名的文件 整体目录&#xff1a; chenjiangLoader.js文件代码 // 正则匹配script标签中的内容 const REG /<script>([\s\S]*)<\/script>/;module.exports function (source) {const __source source.…...

编程日记 2023/9/21 16:14:44

基于Kintex UltraScale系列FPGA KU060/KU115高性能PCIe数据预处理载板（5GByte/s带宽）

PCIE702是一款基于PCIE总线架构的高性能数据预处理FMC载板&#xff0c;板卡具有1个FMC&#xff08;HPC&#xff09;接口&#xff0c;1路PCIe x8主机接口、1个RJ45千兆以太网口、2个QSFP 40G光纤接口。板卡采用Xilinx的高性能Kintex UltraScale系列FPGA作为实时处理器&#xff0…...

编程日记 2023/9/21 16:13:42

Cesium 地球(2)-瓦片创建

Cesium 地球(2)-瓦片创建 QuadtreePrimitive代码执行4个步骤: step1: update()step2: beginFrame()step3: render()step4: endFrame() 但并不是瓦片的创建步骤。 1、创建 QuadtreeTile 基于 step3: render() step3: render()┖ selectTilesForRendering()在 selectTilesFo…...

编程日记 2023/9/21 16:12:41

Selenium-介绍下其他骚操作

Chrome DevTools 简介 Chrome DevTools 是一组直接内置在基于 Chromium 的浏览器&#xff08;如 Chrome、Opera 和 Microsoft Edge&#xff09;中的工具&#xff0c;用于帮助开发人员调试和研究网站。 借助 Chrome DevTools&#xff0c;开发人员可以更深入地访问网站&#xf…...

编程日记 2023/9/21 16:11:38

【C++从0到王者】第三十一站：map与set

文章目录 一、关联式容器二、pair键值对三、set1. set的介绍2. set的部分接口以及应用3. count4. lower_bound和upper_bound5. equal_range6. multiset容器 四、map1. map的介绍2. map的一些常见接口以及使用3. map的[]运算符重载4. 使用map改进一些题5. multimap容器 五、map和…...

编程日记 2023/9/21 16:09:33

生产消费者模型的介绍以及其的模拟实现

目录 生产者消费者模型的概念 生产者消费者模型的特点 基于阻塞队列BlockingQueue的生产者消费者模型 对基于阻塞队列BlockingQueue的生产者消费者模型的模拟实现 ConProd.c文件的整体代码 BlockQueue.h文件的整体代码 对【基于阻塞队列BlockingQueue的生产者消费者模型…...

编程日记 2023/9/21 16:08:31

Unity ML-Agents默认接口参数含义

下面的含义就是训练中常用的yaml文件&#xff1a; behaviors:waffle:trainer_type: ppo #训练器类型&#xff0c;默认ppo。还有sac和pocahyperparameters:batch_size: 64 # 梯度下降每次迭代的经验数。应确保该值总是比 buffer_size小几倍。 在使用连续动作的情况下&#x…...

编程日记 2023/9/21 16:06:28

【python数据分析基础】—pandas中loc()与iloc()的介绍与区别

文章目录 前言一、loc[]函数二、iloc[]函数三、详细用法loc方法iloc方法 总结共同点不同点 前言 我们经常在寻找数据的某行或者某列的时常用到Pandas中的两种方法iloc和loc&#xff0c;两种方法都接收两个参数&#xff0c;第一个参数是行的范围&#xff0c;第二个参数是列的范…...

编程日记 2023/9/21 16:05:27

ad18学习笔记十一：显示和隐藏网络、铺铜

如何显示和隐藏网络&#xff1f; Altium Designer--如何快速查看PCB网络布线_ad原理图查看某一网络的走线_辉_0527的博客-CSDN博客 AD19(Altium Designer)如何显示和隐藏网络 如何显示和隐藏铺铜&#xff1f; Altium Designer 20在PCB中显示或隐藏每层铺铜-百度经验 AD打开与…...

编程日记 2023/9/21 16:04:25

全国职业技能大赛云计算--高职组赛题卷④（私有云）

全国职业技能大赛云计算--高职组赛题卷④&#xff08;私有云&#xff09; 第一场次题目&#xff1a;OpenStack平台部署与运维任务1 基础运维任务&#xff08;5分&#xff09;任务3 OpenStack云平台运维&#xff08;15分&#xff09;任务4 OpenStack云平台运维开发&#xff08;1…...

编程日记 2023/9/21 16:03:24

Camera Tunning ISP 模块面试总结

一.ISP的调试流程概述&#xff1a; 在ISP调试流程中&#xff0c;我们首先需要确认以下三个方面&#xff1a;项目需求、硬件问题确认和Sensor驱动配置确认。 项目需求方面&#xff0c;即Sensor需要出多大的分辨率去调效果&#xff1b;因为有些芯片有最大分辨率支持的限制&#x…...

编程日记 2023/9/21 16:02:21

AOSP源码中Android.mk文件中的反斜杠符号(\)的作用和使用

简介 在AOSP&#xff08;Android Open Source Project&#xff09;源码中的Android.mk文件中&#xff0c;反斜杠符号&#xff08;\&#xff09;的主要作用是将一行代码拆分成多行&#xff0c;以提高可读性并帮助组织较长的代码块。这对于定义复杂的构建规则和变量时特别有用。…...

编程日记 2023/9/21 16:01:16

如何查看mysql的存储引擎

要查看MySQL中的存储引擎&#xff0c;可以使用以下两种方法&#xff1a; 1. 使用 SQL 查询&#xff1a; 您可以使用SQL查询来查看MySQL中的存储引擎。打开MySQL客户端&#xff0c;并连接到您的MySQL服务器&#xff0c;然后运行以下SQL查询&#xff1a; SHOW TABLE STATUS;这…...

编程日记 2023/9/21 16:00:15

FPGA project ： dht11 温湿度传感器

没有硬件&#xff0c;过几天上板测试。 module dht11(input wire sys_clk ,input wire sys_rst_n ,input wire key ,inout wire dht11 ,output wire ds ,output wire …...

编程日记 2023/9/21 15:58:10

std::string和QString的区别以及互转

一 区别 1.字符编码支持 std::string&#xff1a;默认情况下&#xff0c;使用 ASCII 或 UTF-8 编码。不直接提供对多字节字符的内置支持。 QString&#xff1a;提供对多种字符编码的支持&#xff0c;包括 ASCII、UTF-8、UTF-16 等。它更适合处理国际化和本地化的字符串。 2.…...

编程日记 2023/9/21 15:57:09

python+vue理发店管理系统

理发店管理系统主要实现角色有管理员和会员,管理员在后台管理用户表模块、token表模块、收藏表模块、商品分类模块、热卖商品模块、活动公告模块、留言反馈模块、理发师模块、会员卡模块、会员充值模块、会员模块、服务预约模块、服务项目模块、服务类别模块、热卖商品评论表模…...

编程日记 2023/9/21 15:56:06

基于微信小程序的个人健康管理系统的设计与实现(源码+lw+部署文档+讲解等)

前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作者&#xff0c;博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌&#x1f497; &#x1f447;&#x1f3fb;…...

编程日记 2023/9/21 15:55:04

共聚焦显微镜在化学机械抛光课题研究中的应用

两个物体表面相互接触即会产生相互作用力&#xff0c;研究具有相对运动的相互作用表面间的摩擦、润滑与磨损及其三者之间关系即为摩擦学&#xff0c;目前摩擦学已涵盖了化学机械抛光、生物摩擦、流体摩擦等多个细分研究方向&#xff0c;其研究的数值量级也涵盖了亚纳米到百微米…...

编程日记 2023/9/21 15:54:03

本地Linux 部署 Dashy 并远程访问

文章目录 简介1. 安装Dashy2. 安装cpolar3.配置公网访问地址4. 固定域名访问 转载自cpolar极点云文章&#xff1a;本地Linux 部署 Dashy 并远程访问 简介 Dashy 是一个开源的自托管的导航页配置服务&#xff0c;具有易于使用的可视化编辑器、状态检查、小工具和主题等功能。你…...

编程日记 2023/9/21 15:53:02

互联网摸鱼日报(2023-09-18)

互联网摸鱼日报(2023-09-18) 36氪新闻 最前线 | 号外电摩12.68万元起订&#xff0c;配16.9度一体压铸电池包 本周双碳大事&#xff1a;CCER交易管理办法获生态环境部原则通过&#xff1b;明阳斥资100亿元加码光伏项目&#xff1b;“全路程”获2亿元D轮融资 200亿&#xff0c…...

编程日记 2023/9/21 15:51:57

Kotlin中函数的基本用法以及函数类型

函数的基本用法 1、函数的基本格式 2、函数的缺省值 可以为函数设置指定的初始值&#xff0c;而不必要传入值 private fun fix(name: String,age: Int 2){println(name age) }fun main(args: Array<String>) {fix("张三") }输出结果为&#xff1a;张三2 …...

编程日记 2023/9/21 15:49:54

在macOS使用VMware踩过的坑

目录 MAC提示将对您的电脑造成伤害/MAC OS 升级到10.15.3后vmware虚拟机黑屏 mac系统下&#xff0c;vm虚拟机提示打不开/dev/vmmon mac VMware Workstation 在此主机上不支持嵌套虚拟化 mac VMware清理虚拟机空间​​​​​​​ MAC提示将对您的电脑造成伤害/MAC OS 升级到…...

编程日记 2023/9/21 15:48:52

构建健壮的Spring MVC应用：JSON响应与异常处理

目录 1. 引言 2. JSON 1. 轻量级和可读性 2. 易于编写和解析 3. 自描述性 4. 支持多种数据类型 5. 平台无关性 6. 易于集成 7. 社区支持和标准化 3. 高效处理异常 综合案例 异常处理方式一 异常处理方式二 异常处理方式三 1. 引言 探讨Spring MVC中关键的JSON数据…...

编程日记 2023/9/21 15:47:51

那些配置服务器踩的坑

最近在配置内网&#xff0c;无外网的服务器&#xff0c;纯纯记录一下踩得坑&#xff0c;希望看到的人不要再走这条弯路。 ------------------------------------------------------------------------------------------------------------------------------- 任务&#xff…...

编程日记 2023/9/21 15:46:49

交换机端口镜像详解

交换机端口镜像是一种网络监控技术&#xff0c;它允许将一个或多个交换机端口的网络流量复制并重定向到另一个端口上&#xff0c;以便进行流量监测、分析和记录。通过端口镜像&#xff0c;管理员可以实时查看特定端口上的流量&#xff0c;以进行网络故障排查、安全审计和性能优…...

编程日记 2023/9/21 15:44:46

Spring源码分析(三) IOC 之 createBean()和doCreateBean()

a、在createBean中又是主要做了什么事情&#xff1f; 完成bean得创建&#xff0c;填充属性、循环依赖 、aop等一系列过程 1、createBean() 在createBean中主要干了3件事情 1、解析class -> resolveBeanClass() 2、验证及准备覆盖的方法,lookup-method replace-method -> …...

编程日记 2023/9/21 15:43:45

【鸿蒙（HarmonyOS）】UI开发的两种范式：ArkTS、JS（以登录界面开发为例进行对比）

文章目录 一、引言1、开发环境2、整体架构图 二、认识ArkUI1、基本概念2、开发范式&#xff08;附&#xff1a;案例&#xff09;&#xff08;1&#xff09;ArkTS&#xff08;2&#xff09;JS 三、附件 一、引言 1、开发环境 之后关于HarmonyOS技术的分享&#xff0c;将会持续使…...

编程日记 2023/9/21 15:42:43

Flink中的批和流

批处理的特点是有界、持久、大量&#xff0c;非常适合需要访问全部记录才能完成的计算工作&#xff0c;一般用于离线统计。 流处理的特点是无界、实时, 无需针对整个数据集执行操作&#xff0c;而是对通过系统传输的每个数据项执行操作&#xff0c;一般用于实时统计。 而在Flin…...

编程日记 2023/9/21 15:41:42

【LeetCode-中等题】150. 逆波兰表达式求值

文章目录 题目方法一&#xff1a;栈 题目 方法一&#xff1a;栈 class Solution {public int evalRPN(String[] tokens) {Deque<Integer> deque new LinkedList<>();String rpn "-*/";//符号集 用来判断扫描的是否为运算符int sum 0;for(int i 0 ; i…...

编程日记 2023/9/21 15:40:41

搭建ELK+Filebead+zookeeper+kafka实验

部署 Zookeeper 集群 准备 3 台服务器做 Zookeeper 集群 192.168.10.17 192.168.10.21 192.168.10.22 1.安装前准备 关闭防火墙 systemctl stop firewalld systemctl disable firewalld setenforce 0 安装 JDK yum install -y java-1.8.0-openjdk java-1.8.0-openjdk-…...

编程日记 2023/9/21 15:39:40

有没有兼职做设计的网站吗/网站seo优化是什么意思

VO&#xff08;View Object&#xff09;&#xff1a;视图对象&#xff0c;用于展示层&#xff0c;它的作用是把某个指定页面&#xff08;或组件&#xff09;的所有数据封装起来。 DTO&#xff08;Data Transfer Object&#xff09;&#xff1a;数据传输对象&#xff0c;这个概…...

编程日记 2024/10/30 23:17:15

企业网站模板趋势/千峰培训多少钱

1.什么是存储函数 存储函数与存储过程一样&#xff0c;是由SQL语句和过程式语句组成的代码片段。 2.存储过程和存储函数的区别 相同点&#xff1a;存储函数与存储过程一样&#xff0c;是由SQL语句和过程式语句组成的代码片段。 不同点&#xff1a; 3.创建存储函数 ##使用CREAT…...

编程日记 2024/10/30 19:44:38

人大网站建设不足/今日新闻国际最新消息

uci set network.lan.ipaddr[lan ip] 使用pppoe设置 Shell代码 uci set network.wan.protopppoe //设置wan口类型为pppoe uci set network.wan.username[上网帐户] uci set network.wan.password[上网密码] //这两行设置pppoe用户名和密码 如果要挂在上级路由下面,就…...

编程日记 2024/10/30 18:07:49

呼市做开发网站的公司/seo日常工作都做什么的

本篇我将讲解Linux的文件操作命令&#xff0c;说得简单点——通过命令实现对文件或者文件夹的操作。 这是基础操作&#xff0c;跟你平时在电脑上新建、复制、移动文件的操作一样&#xff0c;是你在工作中绝对会用到的。 接下来&#xff0c;请跟随我的脚步&#xff0c;进入实打…...

编程日记 2024/10/30 17:35:36

定制开发电商网站建设多少钱/手机百度高级搜索入口在哪里

目录 文章目录目录RSS 多队列网卡RSS 技术实现原理RSS FilterRSS HASH硬中断信号绑定ethtool 操作指令RSS 多队列网卡 在以往&#xff0c;一张 NIC 只具有一个 Rx Queue&#xff0c;对应一个 CPU Core 来进行收包处理。在多核时代&#xff0c;为了充分利用 Multi-CPU Cores&am…...

编程日记 2024/10/30 16:43:08

凡科做的网站怎么样/北京seo优化推广

方法1&#xff1a;sudo apt-get -f install -f 尝试修正系统依赖损坏处 方法2&#xff1a;修改/etc/apt/sources.list文件&#xff0c;用下面的地址替换原来的官方默认地址 deb cdrom:[Ubuntu 16.04.3 LTS _Xenial Xerus_ - Release amd64 (20170801)]/ xenial main restrict…...

编程日记 2024/10/30 14:36:46