webpack为什么要使用loader,如何手写loader

webpack是一个打包工具,即webpack会将一切文件视为模块,但是webpack在打包的时候只是认识JS文件或者JSON文件,并不认识CSS文件,png图片等,如果想让webpack能够在打包的时候识别其他文件,就必须要使用loader,即loader的作用就是让webpack拥有可以加载和了解除JS文件以外的其他文件。

loader在webpack中的配置:

module.exports = {module: {rules: [{test: /\.css$/i,use: ["style-loader", "css-loader"]}]}
}

其中的rules是一个对象数组,因为在webpack中,不会仅仅是使用一个loader,也会同时使用多个loader帮助webpack来解析除JS外的其他文件,且rules的执行顺序是从下往上执行,即如果我们要优先执行的loader,我们就需要写在rules的最下面。且每个rules都有两个配置项,一个test即是我们这个loader是处理什么对象的,即测试对象。下面的use就是我们使用的loader。

对于Loader我们可以通过rules去匹配,哪些文件会被这个loader所处理。Loader本身就是一个函数,当webpack解析资源的时候,会调用相关的loader去处理,loader接收到文本内容作为参数,将处理完的内容进行返回出去。那么loader除了接收内容作为参数外,还有map代表sourcemap,以及meta代表别的loader传递的参数。

以css-loader为例:

我们需要使用 css-loader 来处理css文件,webpack编译后就不再是CSS文件了,而只是一段JS代码,而使用 style-loader 的作用就是,将css-loader所转化的JS对象进行执行,核心就是会动态的创建一个style标签,将前者所转化的JS对象动态的插入到header中。这样就将CSS文件成功的让webpack识别。

如何写webpack loader

写一个Markdown文件的loader,使md文件可以被import并使用

(识别md文件能够读取md文件信息)

新建一个loader.js文件,里面通过引用插件之类的方法实现我们需要的功能,比如读取markdown文件,利用  marked 插件将md文件转换为html字符串return出去,在webpack.config.js的Module中正则匹配ms后缀文件,使用我们在config中配置的md loader,这样在app.js中引用这个md文件就可以打印出内容的html串了。

// markdown-loader.js
const marked = require('marked') // marked是在package中安装的一个包function transform(source) {const html = marked.parse(source)return `export default ${JSON.stringify(html)}`;
}// webpack中的配置
{test: /.md$/,use: "./config/markdown-loader.js',// use写入loader的相对路径// use不仅可以写入名称,也可以写入路径,和node的require模式是 一样的
}

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

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

相关文章

【Godot4.2】像素直线画法及点求取函数

概述 基于CanvasItem提供的绘图函数进行线段绘制只需要直接调用draw_line函数就可以了。 但是对于可以保存和赋值节点直接使用的纹理图片,却需要依靠Image类。而Image类没有直接提供基于像素的绘图函数。只能依靠set_pixel或set_pixelv进行逐个像素的填色。 所以…

C++项目——集群聊天服务器项目(三)muduo网络库

今天来介绍集群聊天器项目中网络模块代码的核心模块——muduo网络库,一起来看看吧~ 环境搭建C项目——集群聊天服务器项目(一)项目介绍、环境搭建、Boost库安装、Muduo库安装、Linux与vscode配置-CSDN博客 Json第三方库C项目——集群聊天服务器项目(二)Json第三方库…

Nodejs版本管理工具nvm

官网地址 https://github.com/coreybutler/nvm-windows/releases 下载1.1.12版本,使用图形化安装。 参考这篇文章: https://blog.csdn.net/m0_46491549/article/details/129750694 一步到位——Node版本管理神器nvm安装教程(2024最新&#x…

Linux的介绍以及其发展历史

文章目录 前言一、技术是推动社会发展的基本动力1.人为什么能成为万物之长呢?2.人为什么要发明工具,进行进化呢?3.人是如何发明工具的?4.为什么要有不同的岗位和行业? 二、计算机(操作系统)发展的基本脉络1.第一台计算…

Xilinx高级调试方法--多卡调试

Xilinx高级调试方法--多卡调试 1 测试工程2 驱动修改3 工程测试 本文主要介绍基于XVC技术实现多卡调试的方法 1 测试工程 加速卡1 Verdor ID:1BD4Device ID:903E 加速卡2 Verdor ID:1BD4Device ID:903F 2 驱动修改 为了同时识…

智能小程序开发 —— P2P SDK 源码介绍(二)

ty.p2p.uploadFile P2P上传文件 需引入P2PKit,且在>0.0.1版本才可使用 参数 Object object 属性类型默认值必填说明deviceIdstring是设备idalbumNamestring是albumName 和设备端约定字段filePathstring是文件本地路径extDatastring否扩展字段extDataLengthnum…

基于PyTorch深度学习实战入门系列-PyTorch基础全

Torch的基本使用 判断GPU是否可用 torch.cuda.is_available()张量 Torch 定义了 10 种张量类型,包括 CPU 和 GPU 形式,如下表所示: 数据类型dtypeCPU张量GPU张量32位浮点数torch.float32、torch.floattorch.FloatTensortorch.cuda.FloatTenso…

大数据技术原理与应用 01.大数据概述

不可以垂头丧气,会显矮 —— 24.3.24 参考学习:厦门大学 林子雨老师 大数据技术原理与应用 一、大数据时代 大数据概念、影响、应用、关键技术 大数据与云计算、物联网的关系 ①三次信息化浪潮时代 ②第三次信息化浪潮的技术支撑 1>存储设备容量不断…

ARM:按键中断

key_inc.c #include"key_inc.h"void key1_it_config(){//使能GPIOF外设时钟RCC->MP_AHB4ENSETR | (0x1<<5);//将PF9设置为输入模式GPIOF->MODER & (~(0x3<<18));//设置由PF9管脚产生EXTI9事件EXTI->EXTICR3 & (~(0XFF<<8));EXTI…

msyq类型类转换造成索引失效

今天碰到一个慢sql的问题&#xff0c;sql明明按照最前缀的原则写的&#xff0c;但是索引就是不生效&#xff0c;最终排查发现是因为索引字段发生类型转换造成的。 一、表结构 1、表字段 2、表索引 二、问题sql EXPLAIN SELECT * FROM t_res WHERE open 1 AND res_date &…

蓝桥杯day12刷题日记

P8720 [蓝桥杯 2020 省 B2] 平面切分 思路&#xff1a;首先借用dalao的图解释一下&#xff0c;又多出一条与当前平面任意一条直线都不重合线时&#xff0c;多了的平面是交点数1&#xff0c;所以用双层循环每次往里面加一条直线&#xff0c;计算交点 #include <iostream>…

Ubuntu Desktop - Updates (不升级到新版本)

Ubuntu Desktop - Updates [不升级到新版本] 1. UpdatesReferences 1. Updates System Settings -> Software & Updates -> Updates ubuntu-16.04.3-desktop-amd64.iso 不升级到新版本 ​ References [1] Yongqiang Cheng, https://yongqiang.blog.csdn.net/

TypeScript 常见的面试题

文章目录 1. 什么是TypeScript2. 类型声明和类型推断的区别&#xff0c;并举例应用3. 什么是接口&#xff08;interface&#xff09;&#xff0c;它的作用&#xff0c;接口的使用场景。接口和类型别名&#xff08;Type Alias&#xff09;的区别4. 什么是泛型&#xff08;generi…

RK3588开发笔记-v1.3.0-SDK文件系统分区添加

目录 目录 前言 一、分区文件 二、分区文件初始化 三、板级配置文件修改

【Linux】nmcli命令详解

目录 ​编辑 一、概述 二、常用参数使用 2.1 nmcli networking 1.显示NM是否接管网络 2.查看网络连接状态 3.开/关网络连接 2.2 general ​编辑 1.显示系统网络状态 2.显示主机名 3.更改主机名 2.3 nmcli connection ​编辑1.显示所有网络连接 2.显示某个网卡的…

JAVA 100道题(15)

15.使用TreeSet对一组整数进行排序。 在Java中&#xff0c;TreeSet是一个基于红黑树实现的NavigableSet接口。由于它是自动排序的&#xff0c;因此当我们向TreeSet中添加元素时&#xff0c;它们会自动按照自然顺序&#xff08;对于整数&#xff0c;就是从小到大的顺序&#xf…

【数据结构】快速排序(用递归)

大家好&#xff0c;我是苏貝&#xff0c;本篇博客带大家了解快速排序&#xff0c;如果你觉得我写的还不错的话&#xff0c;可以给我一个赞&#x1f44d;吗&#xff0c;感谢❤️ 目录 一. 基本思想二. 快速排序2.1 hoare版本2.2 挖坑法2.3 前后指针法2.4 快速排序优化三数取中法…

redis 基本操作

1、String 类型 赋值语法&#xff1a;SET key value 127.0.0.1:6379> set k1 zhangsan OK 取值语法&#xff1a; GET key 127.0.0.1:6379> get k1 "zhangsan" 设置多个键语法&#xff1a; MSET key value [key value …] 127.0.0.1:6379> mset k2 lisi k3 …

Python学习目录

基础篇 变量赋值篇字符串(string)篇&#xff08;一&#xff09;字符串(string)篇&#xff08;二&#xff09;字符串(string)篇&#xff08;三&#xff09;字符串(string)篇&#xff08;四&#xff09;字符串(string)篇&#xff08;五&#xff09;列表(list)篇&#xff08;一&a…

【Android】【Bluetooth Stack】蓝牙电话协议之接听电话分析(超详细)

1. 精讲蓝牙协议栈&#xff08;Bluetooth Stack&#xff09;&#xff1a;SPP/A2DP/AVRCP/HFP/PBAP/IAP2/HID/MAP/OPP/PAN/GATTC/GATTS/HOGP等协议理论 2. 欢迎大家关注和订阅&#xff0c;【蓝牙协议栈】和【Android Bluetooth Stack】专栏会持续更新中.....敬请期待&#xff0…