详细介绍Webpack5中的Loader

2023-07-27 10:15:51

loader用于帮助 webpack 将不同类型的文件转换为 webpack 可识别的模块。
在这里插入图片描述

优先级分类

pre： 前置 loader
normal： 普通 loader，没有用enforce指定就是normal
inline： 内联 loader
post： 后置 loader

loader执行顺序

pre > normal > inline > post
相同优先级的 loader 执行顺序为：从右到左，从下到上。

使用 loader 的方式

1.配置方式：在 webpack.config.js 文件中指定 loader。（pre、normal、post loader）
2.内联方式：在每个 import 语句中显式指定 loader。（inline loader）

inline loader

用法：使用 css-loader 和 style-loader 处理 styles.css 文件import Styles from 'style-loader!css-loader?modules!./styles.css';

通过 ! 将资源中的 loader 分开，？是给前面传参，inline loader 可以通过添加不同前缀，跳过其他类型 loader。

前面加 ! 跳过 配置为normal的loader。

import Styles from '!style-loader!css-loader?modules!./styles.css';

-! 跳过配置为 pre 和 normal 的 loader。

import Styles from '-!style-loader!css-loader?modules!./styles.css';

!! 跳过配置为 pre、 normal 和 post 的 loader。

import Styles from '!!style-loader!css-loader?modules!./styles.css';

loader 分类

loader 接受的参数：
content 源文件的内容
map SourceMap 数据
meta 数据，可以是任何内容

1. 同步 loader

它接受要处理的源码作为参数，输出转换后的 js 代码。

module.exports = function (content, map, meta) {
  return content;
};

this.callback 方法则更灵活，因为它允许传递多个参数，而不仅仅是 content。

module.exports = function (content, map, meta) {
  // 传递map，让source-map不中断
  // 传递meta，让下一个loader接收到其他参数
  this.callback(null, content, map, meta);
  return; // 当调用 callback() 函数时，总是返回 undefined
};

2. 异步 loader

module.exports = function (content, map, meta) {
  const callback = this.async();
  // 进行异步操作
  setTimeout(() => {
    callback(null, result, map, meta);
  }, 1000);
};

由于同步计算过于耗时，在 Node.js 这样的单线程环境下进行此操作并不是好的方案，尽可能地使loader异步化。但如果计算量很小，同步 loader 也是可以的。

3. Raw Loader

默认情况下，资源文件会被转化为 UTF-8 字符串，然后传给 loader。通过设置 raw 为 true，loader 可以接收原始的 Buffer，通常处理图片、字体等资源会用到。

module.exports = function (content) {
  // content是一个Buffer数据
  return content;
};
module.exports.raw = true; // 开启 Raw Loader

4. Pitching Loader

module.exports = function (content) {
  return content;
};
module.exports.pitch = function (remainingRequest, precedingRequest, data) {
  console.log("do somethings");
};

webpack 会先从左到右执行 loader 链中的每个 loader 上的 pitch 方法（如果有），然后再从右到左执行 loader 链中的每个 loader 上的普通 loader 方法。
在这里插入图片描述
在这个过程中如果任何 pitch 有返回值，则 loader 链被阻断。webpack 会跳过后面所有的的 pitch 和 loader，直接进入上一个 loader 。
在这里插入图片描述

loader API

在这里插入图片描述
更多可查看：这里。

自定义loader

clean-log-loader

作用：用来清理 js 代码中的console.log

// loaders/clean-log-loader.js
module.exports = function cleanLogLoader(content) {
  // 将console.log替换为空
  return content.replace(/console\.log\(.*\);?/g, "");
};

banner-loader

作用：给 js 代码添加文本注释

loaders/banner-loader/index.js：

const schema = require("./schema.json");

module.exports = function (content) {
  // 获取loader的options，同时对options内容进行校验
  // schema是options的校验规则（符合 JSON schema 规则）
  const options = this.getOptions(schema);

  const prefix = `
    /*
    * Author: ${options.author}// 这也可以直接一个字符串写死，就不用json和options配置了
    */
  `;

  return `${prefix} \n ${content}`;
};

loaders/banner-loader/schema.json：

{
  "type": "object",
  "properties": {
    "author": {
      "type": "string"
    }
  },
  "additionalProperties": false
}

webpack.config.js中使用：在rules里增加：

{
  test: /\.js$/,
  loader: "./loaders/banner-loader",
  options: {
	author: "zagiee"
  }
},

babel-loader

作用：编译 js 代码，将 ES6+语法编译成 ES5-语法。

下载依赖：npm i @babel/core @babel/preset-env -D

loaders/babel-loader/index.js：

const schema = require("./schema.json");
const babel = require("@babel/core");

module.exports = function (content) {
  const options = this.getOptions(schema);
  // 使用异步loader
  const callback = this.async();
  // 使用babel对js代码进行编译
  babel.transform(content, options, function (err, result) {
    callback(err, result.code);
  });
};

loaders/banner-loader/schema.json：

{
  "type": "object",
  "properties": {
    "presets": {
      "type": "array"
    }
  },
  "additionalProperties": true
}

webpack.config.js中使用：在rules里增加：

{
  test: /\.js$/,
  loader: "./loaders/babel-loader",
  options: {
	presets: ["@babel/preset-env"]
  }
},

babel官网

file-loader

作用：将文件原封不动输出出去

下载包：npm i loader-utils -D

loaders/file-loader.js：

const loaderUtils = require("loader-utils");

function fileLoader(content) {
  // 根据文件内容生产一个新的文件名称
  const filename = loaderUtils.interpolateName(this, "[hash].[ext]", {
    content,
  });
  // 输出文件
  this.emitFile(filename, content);
  // 暴露出去，给js引用。
  // 记得加上''
  return `export default '${filename}'`;
}
fileLoader.raw = true;// 图片是 Buffer 数据
module.exports = fileLoader;

loader 配置：

{
  test: /\.(png|jpe?g|gif)$/,
  loader: "./loaders/file-loader.js",
  type: "javascript/auto", // 只使用自定义的loader，解决图片重复打包问题
},

style-loader

作用：动态创建 style 标签，插入 js 中的样式代码，使样式生效。

loaders/style-loader.js

const styleLoader = () => {};

styleLoader.pitch = function (remainingRequest) {
  /*
    remainingRequest: C:\Users\86176\Desktop\source\node_modules\css-loader\dist\cjs.js!C:\Users\86176\Desktop\source\src\css\index.css
      这里是inline loader用法，代表后面还有一个css-loader等待处理

    最终我们需要将remainingRequest中的路径转化成相对路径，webpack才能处理
      希望得到：../../node_modules/css-loader/dist/cjs.js!./index.css

    所以：需要将绝对路径转化成相对路径
    要求：
      1. 必须是相对路径
      2. 相对路径必须以 ./ 或 ../ 开头
      3. 相对路径的路径分隔符必须是 / ，不能是 \
  */
  const relativeRequest = remainingRequest
    .split("!")
    .map((part) => {
      // 将路径转化为相对路径
      const relativePath = this.utils.contextify(this.context, part);
      return relativePath;
    })
    .join("!");

  /*
    !!${relativeRequest} 
      relativeRequest：../../node_modules/css-loader/dist/cjs.js!./index.css
      relativeRequest是inline loader用法，代表要处理的index.css资源, 使用css-loader处理
      !!代表禁用所有配置的loader，只使用inline loader。（也就是外面我们style-loader和css-loader）,它们被禁用了，只是用我们指定的inline loader，也就是css-loader

    import style from "!!${relativeRequest}"引入css-loader处理后的css文件
      为什么需要css-loader处理css文件，不是我们直接读取css文件使用呢？
      因为可能存在@import导入css语法，这些语法就要通过css-loader解析才能变成一个css文件，否则我们引入的css资源会缺少
    const styleEl = document.createElement('style')
      动态创建style标签
    styleEl.innerHTML = style
      将style标签内容设置为处理后的css代码
    document.head.appendChild(styleEl)
      添加到head中生效
  */
  const script = `
    import style from "!!${relativeRequest}"
    const styleEl = document.createElement('style')
    styleEl.innerHTML = style
    document.head.appendChild(styleEl)
  `;

  // style-loader是第一个loader, 由于return导致熔断，所以其他loader不执行了（不管是normal还是pitch）
  return script;
};

module.exports = styleLoader;

参考文档

更多推荐

Spring MongoDB

为什么选择MongoDB，而不是其它的数据库。在SQL和NoSQL之间有一个大的争论。在SQL中，创建Tables。在NoSQL中，我们不维持这个结构。为什么这样重要。因为SQL在19世纪70年代变得流行的时候，在那时存储是昂贵的。我们需要确保使用最小的存储，这样我们可以存储最大量的数据。这是SQL类型表的意义。在当前

网络编程day04（网络属性函数、广播、组播、TCP并发）

今日任务对于newfd的话，最好是另存然后传入给分支线程，避免父子线程操作同一个文件描述符1.广播：接收端代码：#include<stdio.h>#include<string.h>#include<stdlib.h>#include<sys/types.h>/*SeeNOTES*/#include<sys/socke

如何通过一键导出导入数据实现批量重命名文件名称

在日常办公中，我们经常需要对大量的文件进行重命名，以便更好地管理和查找文件。而且，有时候我们还需要将文件名称翻译成其他语言，以适应不同的工作需求。如何高效地完成这项任务呢？接下来，我将介绍一种方法，让你事半功倍。首先，你需要下载并安装一个名为“固乔文件管家”的软件。这是一款功能强大的文件管理工具，可以帮助你批量改名文件

山洪灾害预警方案(山洪预警解决方案的组成)

​随着气候变化的不断加剧，山洪灾害在许多地区成为了极具威胁性的自然灾害之一。为了帮助地方政府和居民更好地预防和应对山洪灾害，我们设计了一套基于星创易联的SR600工业路由器和DTU200的山洪灾害预警方案，并成功在某地区进行了部署。案例背景：我们选择了某山区作为实际部署的案例。这个地区常年受山洪的威胁，由于地处偏远，传

使用 Verilator 进行 Verilog Lint

FPGA设计是无情的，所以我们需要利用能获得的任何软件进行检查。Verilator是一个Verilog仿真器，还支持linting：静态分析设计中的问题。Verilator不仅可以发现综合工具可能忽略的问题，而且运行速度也很快。Verilator也非常适合使用SDL进行图形仿真。安装VerilatorLinuxVeri

C++ Primer Plus 第七章笔记

目录函数基本知识没有返回值的函数：void函数有返回值的函数：函数原型1.为什么需要函数原型？2.函数原型的语法3.函数原型的功能按值传递函数参数形参和实参局部变量参数问题使用const指针参数调用自身的函数（递归）指向函数的指针1.获取函数的地址2.声明函数指针3.使用函数指针来调用函数函数基本知识要使用C++函数必

分布式协议与算法——Raft算法

目录Raft算法领导者选举有哪些成员身份？领导者选举流程选举细节节点之间如何通信什么是任期选举有哪写规则随机超时时间是什么小结日志复制如何理解日志如何复制日志如何实现日志的一致小结节点成员变更成员变更的问题如何通过单节点变更解决成员变更的问题小结Raft小结Raft算法Raft算法属于Multi-Paxos算法，它是在

2023年贵州省职业院校技能大赛高职组信息安全管理与评估竞赛试题

2023年贵州省职业院校技能大赛高职组信息安全管理与评估竞赛试题第一阶段竞赛项目试题根据信息安全管理与评估技术文件要求，第一阶段为网络平台搭建与网络安全设备配置与防护。本文件为信息安全管理与评估项目竞赛-第一阶段试题。介绍竞赛阶段任务阶段竞赛任务第一阶段平台搭建与安全设备配置防护任务1网络平台搭建任务2网络安全设备配置

【SQL】MySQL中的窗口函数（开窗函数）

窗口函数是MYSQL8.0新增的聚合函数：多行变一行，常见的sum，count，max，min窗口函数：行数不变，常见的row_number,rank语法格式：窗口函数(表达式)over(partitionby…orderby…frame_clause)partitionby是分区，类似于groupby，如去掉相当于对

MySQL数据库入门到精通1--基础篇(MySQL概述，SQL)

1.MySQL概述1.1数据库相关概念目前主流的关系型数据库管理系统：Oracle：大型的收费数据库，Oracle公司产品，价格昂贵。MySQL：开源免费的中小型数据库，后来Sun公司收购了MySQL，而Oracle又收购了Sun公司。目前Oracle推出了收费版本的MySQL，也提供了免费的社区版本。SQLServe

docker基础命令快速入门

docker快速入门Docker是一个虚拟环境容器，可以将你的开发环境、代码、配置文件等一并打包到这个容器中，并发布和应用到任意平台中。Docker的三个概念镜像Docker镜像是一个特殊的文件系统，除了提供容器运行时所需的程序、库、资源、配置等文件外，还包含了一些为运行时准备的配置参数。镜像不包含任何动态数据，其内容

热文推荐
  1. 【深度学习】卷积神经网络（LeNet）【文章重新修改中】

    卷积神经网络LeNet前言LeNet模型代码实现MINST代码分块解析1构建LeNet网络结构2加载数据集3初始化模型和优化器4训练模型5训练完成完整代码Fashion-MINST代码分块解析1构建LeNet网络结构2初始化模型参数3加载数据集4定义损失函数和优化器5训练模型完整代码参考与更多阅读材料前言全连接神经网络

  2. 前端进阶--深入理解JavaScript

    1、JS的作用域和作用域链作用域链的作用是保证对执行环境有权访问的所有变量和函数的有序访问，通过作用域链，我们可以访问到外层环境的变量和函数。作用域链的本质上是一个指向变量对象的指针列表。变量对象是一个包含了执行环境中所有变量和函数的对象。作用域链的前端始终都是当前执行上下文的变量对象。全局执行上下文的变量对象（也就是

  3. SpringBatch ItemProcessor详解

    ItemProcessor在SpringBatch中用于对每个读取的数据项（item）进行处理或转换。一、ItemProcessor具体功能数据清洗（DataCleansing）：清理数据以确保数据的一致性和准确性。这可以包括去除不必要的空格、特殊字符、修复数据格式等。数据转换（DataTransformation）：

  4. mongodb语法以及springboot中操作mongodb数据库（query update Criteria的使用）

    mongodb语法创建数据库：useDATABASE_NAME创建集合：db.createCollection("COLLECTION_NAME")插入数据：db.COLLECTION_NAME.insert({key:value})查询数据：db.COLLECTION_NAME.find()更新数据：db.COLLE

  5. 基于SpringBoot的阿博图书馆管理系统

    目录前言一、技术栈二、系统功能介绍管理员功能模块用户功能模块前台首页功能模块三、核心代码1、登录模块2、文件上传模块3、代码封装前言随着社会的发展，计算机的优势和普及使得阿博图书馆管理系统的开发成为必需。阿博图书馆管理系统主要是借助计算机，通过对图书借阅等信息进行管理。减少管理员的工作，同时也方便广大用户对所需图书借阅

  6. MongoDB索引

    索引支持在MongoDB中高效执行查询。如果没有索引，MongoDB必须扫描集合中的每个文档才能返回查询结果。如果查询存在适当的索引，MongoDB将使用该索引来限制它必须扫描的文档数。尽管索引提高了查询性能，但添加索引对写入操作的性能有负面影响。对于具有高读写比率的集合，索引是昂贵的，因为每次插入都必须更新任何索引。

  7. 第四天：gec6818开发板串口蓝牙模块的使用与配置

    串口通信串口是一种简单的通信接口，也是单片机中最常用最简单的通信方式通常传感器都是采用串口作为与上位机的通信接口ARM板有三个可外接传感器的串口接口，位于开发板右上角从上到下，分别是串口号串口驱动设备文件CON2“/dev/ttySAC1”CON3“/dev/ttySAC2”CON4“/dev/ttySAC3”将传感器

  8. 数据结构和算法（8）：搜索树（二叉搜索树和AVL树）

    查找所谓的查找或搜索，指从一组数据对象中找出符合特定条件者，这是构建算法的一种基本而重要的操作。其中的数据对象，统一地表示和实现为词条（entry）的形式；不同词条之间，依照各自的关键码（key）彼此区分。循关键码访问：查找的过程与结果，仅仅取决于目标对象的关键码。词条template<typenameK,typena

  9. 【MongoDB】docker部署社区版（一）

    0、背景介绍项目中使用MongoDB了，服务器挂掉，自己在本地搭一个试试。1、版本选择首先有社区版和和商业版。我选的是社区版。链接：https://hub.docker.com/r/mongodb/mongodb-community-server/tags1.1、标签选择看到标签有两个大类，一个是Ubuntu一个是ub