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

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

news 2026/5/17 5:05:43

案例： 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

CI/CD安全最佳实践：保护软件交付流程

CI/CD安全最佳实践&#xff1a;保护软件交付流程 一、CI/CD安全最佳实践概述 1.1 CI/CD安全最佳实践的定义 CI/CD安全最佳实践是指在持续集成和持续部署流程中实施的安全策略和措施。它涵盖代码提交、构建、测试、部署等各个阶段的安全防护。 1.2 CI/CD安全最佳实践的价值 安全…...

编程新知 2026/5/17 4:56:05

【限时解密】ElevenLabs未文档化的/v1/text-to-speech/{voice_id}/with-timing接口：获取逐词时间戳+音素级对齐数据（仅剩3个Beta白名单通道）

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;ElevenLabs英文语音生成的核心能力与技术定位 ElevenLabs 是当前业界领先的 AI 语音合成平台&#xff0c;其英文语音生成能力建立在自研的端到端神经声学模型&#xff08;如 ElevenMultilingualV2&…...

编程新知 2026/5/17 4:22:37

DIY热熔螺母压入装置：从原理到实践，解决3D打印螺纹连接痛点

1. 项目概述&#xff1a;为什么我们需要一台热熔螺母压入装置&#xff1f;如果你和我一样&#xff0c;是个热衷于用3D打印制作原型、工具甚至小批量功能件的爱好者&#xff0c;那你一定遇到过这个痛点&#xff1a;如何在塑料件上实现一个坚固、耐用且能反复拆装的螺纹连接&…...

编程新知 2026/5/17 4:15:52

Cursor编辑器状态快照插件开发：一键保存与恢复工作区

1. 项目概述&#xff1a;一个专为开发者设计的“后悔药”如果你是一名重度使用 Cursor 编辑器的开发者&#xff0c;那么你一定经历过这样的场景&#xff1a;在沉浸式编码时&#xff0c;为了快速定位或修改&#xff0c;你可能会频繁地使用CtrlClick跳转到函数定义&#xff0c;或…...

编程新知 2026/5/17 4:15:50

Arm Neoverse CMN-700架构与寄存器配置详解

1. Arm Neoverse CMN-700架构概览在现代多核处理器设计中&#xff0c;如何高效实现缓存一致性一直是核心挑战。Arm Neoverse CMN-700&#xff08;Coherent Mesh Network&#xff09;作为第二代一致性网格网络IP&#xff0c;采用分布式架构解决了从16核到256核规模的数据一致性问…...

编程新知 2026/5/17 2:37:01

CircuitPython实战：I2S音频播放与asyncio异步编程构建智能温度监测系统

1. 项目概述与核心价值如果你正在寻找一种能让你的嵌入式项目“开口说话”或者“耳听八方”的方案&#xff0c;I2S音频绝对是你绕不开的技术。不同于我们熟悉的模拟音频&#xff0c;I2S是一种纯粹的数字音频传输协议&#xff0c;它通过三根线——时钟、声道选择和数据——就能传…...

编程新知 2026/5/17 2:27:59

紧急更新！Midjourney刚推送的--stylize 1000级调优补丁，已实测提升立体主义结构清晰度达4.8倍（附对比数据集下载）

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;Midjourney立体主义风格的本质解构 立体主义并非简单地将物体“打碎再拼合”&#xff0c;而是一种对多维时空感知的视觉转译——Midjourney 通过其隐式扩散先验&#xff0c;以概率化方式重构了布拉克与…...

编程新知 2026/5/17 2:05:25

为AI智能体设计的任务管理后端：构建标准化、机器友好的任务元模型

1. 项目概述&#xff1a;一个为AI而生的待办清单最近在折腾各种AI工具链和自动化流程时&#xff0c;我遇到了一个挺普遍的问题&#xff1a;如何让AI助手&#xff0c;比如ChatGPT、Claude或者本地部署的大语言模型&#xff0c;更好地理解并管理我手头一堆零散、动态的任务&#…...

编程新知 2026/5/17 2:05:23

Helm Diff插件：可视化Kubernetes部署变更，保障发布安全

1. 项目概述&#xff1a;Helm Diff&#xff0c;一个让Kubernetes部署变更“可视化”的利器 如果你和我一样&#xff0c;长期在Kubernetes&#xff08;K8s&#xff09;环境中摸爬滚打&#xff0c;使用Helm来管理复杂的应用部署&#xff0c;那么你一定经历过这样的场景&#xff1…...

编程新知 2026/5/17 1:58:57

Python驱动GitHub Actions状态监控：打造物理信号塔灯实时反馈CI/CD流水线

1. 项目概述与核心价值在团队协作开发中&#xff0c;持续集成与持续部署&#xff08;CI/CD&#xff09;的流水线状态是项目健康度的“晴雨表”。我们每天都会频繁地提交代码、触发构建&#xff0c;然后盯着GitHub Actions页面上那些或绿或红的标记。但问题在于&#xff0c;这种…...

编程新知 2026/5/17 1:33:11