webpack 如何编写 loader

已于 2023-05-23 21:58:00 修改
阅读量885 收藏 4
点赞数 1
分类专栏： Webpack 前端工程化 文章标签： webpack loader-utils schema-utils 编写 loader webpack loader
于 2023-01-08 20:38:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41887214/article/details/128605233
版权

目录

loader 执行顺序

分类

  • pre： 前置 loader
  • normal： 普通 loader
  • inline： 内联 loader
  • post： 后置 loader

执行顺序

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

// 此时loader执行顺序：loader3 - loader2 - loader1
module: {
  rules: [
    {
      test: /\.js$/,
      loader: "loader1",
    },
    {
      test: /\.js$/,
      loader: "loader2",
    },
    {
      test: /\.js$/,
      loader: "loader3",
    },
  ],
},

// 此时loader执行顺序：loader1 - loader2 - loader3
module: {
  rules: [
    {
      enforce: "pre",
      test: /\.js$/,
      loader: "loader1",
    },
    {
      // 没有enforce就是normal
      test: /\.js$/,
      loader: "loader2",
    },
    {
      enforce: "post",
      test: /\.js$/,
      loader: "loader3",
    },
  ],
},

开发一个 loader

1. 最简单的 loader

// loaders/loader1.js
module.exports = function loader1(content) {
  console.log("hello loader");
  return content;
};

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

2. loader 接受的参数

  • content 源文件的内容
  • map SourceMap 数据
  • meta 数据，可以是任何内容

loader 的使用方式

  • 配置方式：在 webpack.config.js 文件中指定 loader。（pre、normal、post loader）
  • inline loader
    • 用法：import Styles from ‘style-loader!css-loader?modules!./styles.css’;
    • 含义：
      • 使用 css-loader 和 style-loader 处理 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 分类

1. 同步 loader

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 也是可以的。

Raw Loader

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

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

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

方法名含义用法
this.async异步回调 loader。返回 this.callbackconst callback = this.async()
this.callback可以同步或者异步调用的并返回多个结果的函数this.callback(err, content, sourceMap?, meta?)
this.getOptions(schema)获取 loader 的 optionsthis.getOptions(schema)
this.emitFile产生一个文件this.emitFile(name, content, sourceMap)
this.utils.contextify返回一个相对路径this.utils.contextify(context, request)
this.utils.absolutify返回一个绝对路径this.utils.absolutify(context, request)

更多文档，请查阅 webpack 官方 loader api 文档open in new window


三种本地开发测试 loader 的方法

1. 匹配（test）单个 loader

你可以通过在 rule 对象使用 path.resolve 指定一个本地文件：

webpack.config.js

const path = require('path');

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: path.resolve('path/to/loader.js'),
            options: {
              /* ... */
            },
          },
        ],
      },
    ],
  },
};

2. 匹配（test）多个 loaders

你可以使用 resolveLoader.modules 配置，webpack 将会从这些目录中搜索这些 loaders。例如，如果你的项目中有一个 /loaders 本地目录：

webpack.config.js

const path = require('path');

module.exports = {
  //...
  resolveLoader: {
    modules: ['node_modules', path.resolve(__dirname, 'loaders')],
  },
};

3. npm link

如果你已经为 loader 创建了独立的库和包，你可以使用 npm link 来将其链接到你要测试的项目。


参数

1. 当一个 loader 在资源中使用，这个 loader 只能传入一个参数 - 一个包含资源文件内容 字符串


2. loader 会返回一个或者两个值。第一个值的类型是 JavaScript 代码的字符串或者 buffer


3. loader 可以被链式调用意味着不一定要输出 JavaScript。只要下一个 loader 可以处理这个输出，这个 loader 就可以返回任意类型的模块（对外开源的loader一定要返回字符串或者 buffer）


项目目录

让我们实现一个简易的raw-loader，我们将其命名为 my-raw-loader。这个loader的功能就是支持javascript引用文件原始文本内容

├── loaders                     # loader目录
├── src                         # 业务代码
│   │── happy-new-year.txt
│   │── index.html
│   └── index.js										
├── .gitignore
├── package.json
├── package-lock.json
└── webpack.config.js			# webpack 配置文件

搭建项目

mkdir my-loader
cd my-loader
npm init -y

npm i -D webpack webpack-cli html-webpack-plugin webpack-dev-server loader-utils

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
  mode: 'development',
  plugins: [
    new HtmlWebpackPlugin({
      title: '自定义 webpack loader',
      template: './src/index.html',
    }),
  ],
};

src/index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>

</body>
</html>

src/index.js

import text from './happy-new-year.txt';

const textDom = document.createElement('p');
textDom.style.cssText = 'width: 200px;height: 200px;background-color: pink;';
textDom.innerText = text;
document.body.appendChild(textDom);

src/happy-new-year.txt

🎉🎉🎆🎆🧨🧨
新年快乐！大吉大利！
🎉🎉🎆🎆🧨🧨

执行 npx webpack-dev-server，会发现编译报错了

在这里插入图片描述

那么下面我们就实现 my-raw-loader 来抛砖引玉！


my-raw-loader

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
  mode: 'development',
  module: {
    rules: [
      {
        test: /.txt$/,
        use: [
          {
            loader: path.resolve(__dirname, 'loaders/my-raw-loader'),
            options: {
              esModule: true,
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: '自定义 webpack loader',
      template: './src/index.html',
    }),
  ],
};

loaders/my-raw-loader.js

function myRawLoader(source) {
  console.log('source', source);
}

module.exports = myRawLoader;

执行 npx webpack-dev-server 可以看到打印结果，这个参数是一个字符串

在这里插入图片描述


简单实现一个 loader

修改 loaders/my-raw-loader.js

function myRawLoader(source) {
  // 提取给定的 loader 选项，
  // 从 webpack 5 开始，this.getOptions 可以获取到 loader 上下文对象。它用来替代来自 loader-utils 中的 getOptions 方法。
  const { esModule } = this.getOptions();
  console.log('esModule:', esModule);

  // 这里一定要返回字符串或者 buffer
  if (!esModule) {
    return `module.exports = ${JSON.stringify(source)}`;
  }
  return `export default ${JSON.stringify(source)}`;
}

module.exports = myRawLoader;

执行 npx webpack-dev-server可以看到通过 this.getOptions() 获取到了当前 loader 的配置，并且编译未报错，访问 http://localhost:8080/ 页面得偿所愿！成功读取并渲染了原始文本内容。

在这里插入图片描述

在这里插入图片描述


schema-utils

schema-utils 由webpack 官方提供， 它配合 loader-utils，用于保证 loader 选项，进行与 JSON Schema 结构一致的校验

const { validate } = require('schema-utils');
const schema = {
  type: 'object',
  properties: {
    esModule: {
      type: 'boolean',
    }
  },
  "additionalProperties": false // 是否允许不存在的选项传入
};

function myRawLoader(source) {
  const options = this.getOptions();
  validate(schema, options, {
    name: 'my-raw-loader',
    baseDataPath: 'options',
  });

  // 提取给定的 loader 选项，
  // 从 webpack 5 开始，this.getOptions 可以获取到 loader 上下文对象。它用来替代来自 loader-utils 中的 getOptions 方法。
  console.log('esModule:', options.esModule);

  // 这里一定要返回字符串或者 buffer
  if (!options.esModule) {
    return `module.exports = ${JSON.stringify(source)}`;
  }
  return `export default ${JSON.stringify(source)}`;
}

module.exports = myRawLoader;

如果传入未定义的选项，则会发生编译报错

{
  test: /.txt$/,
  use: [
    {
      loader: path.resolve(__dirname, 'loaders/my-raw-loader'),
      options: {
        esModule2: true,
      },
    },
  ],
},

在这里插入图片描述



源码地址：https://gitee.com/yanhuakang/webpack-demos/tree/master/proficient/step_1-custom-loader

__畫戟__
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
webpack系统学习（十四）如何编写一个loader
Niall_Tonshall的博客
02-23 1727
创建一个简单的loader 所谓 loader 只是一个导出为函数的 JavaScript 模块。loader runner 会调用这个函数，然后把上一个 loader 产生的结果或者资源文件(resource file)传入进去。函数的 this 上下文将由 webpack 填充。 假设我们现在有一个index.js: //index.js console.log("hello world") 在不对js文件进行额外处理时对其进行打包，得到/dist/main.js //main.js ... /***
如何编写好一个Webpack Loader
weixin_43554584的博客
01-09 122
官方文档How to write a loader的翻译
schema-utils:期权验证
04-30
模式实用程序 加载程序和插件中用于验证选项的软件包。 入门 首先，您需要安装schema-utils ： npm install schema-utils 原料药 schema.json { " type " : " object " , " properties " : { " option " : { " type " : " boolean " } }, " additionalProperties " : false } import schema from './path/to/schema.json' ; import { validate } from 'schema-utils' ; const options = { option : true } ; const configuration = { name : 'Loa
webpack开发loader
AI_rookie的博客
03-16 222
1.同步loader，从上到下顺序执行，没有异步事件// 同步方式 // 第一种方式 return content // 第二种方式,可以向下一个loader传递参数和报错处理 this . callback(null , content , map , meta) }2.异步loader，在异步事件中处理// 同上 callback(null , content , map , meta) } , 1000) }3.处理buffer流文件的loader,返回二进制数据。
schema-utils：高效且易用的配置验证工具
最新发布
gitblog_00036的博客
05-28 318
schema-utils：高效且易用的配置验证工具 项目地址:https://gitcode.com/webpack-contrib/schema-utils 在开发JavaScript应用，特别是使用Webpack等构建工具时，我们经常需要处理各种配置选项。确保这些配置的有效性和正确性至关重要，而这就是schemas-utils大展身手的地方。这个小巧但强大的库提供了一种简洁的方法来验证加载器和...
webpack 之 Loader开发（一）
Luckyzhoufangbing的博客
04-16 523
Loader 只在编译时执行一次，也就是启动时，所以在开发过程中有改动，需要重启验证，又或者配合 webpack watch。我们项目中可能会配置很多，但要记住，要保持一个 Loader 的功能单一，避免做多种功能，只需完成一种功能转换即可。以上是打印的日志，是在Node的终端中打印，不是在浏览器中，Loader其实是Node语言。2. Loader可能经过一层层链路、又或者只有一层，最终的处理都是转化成 js，（当然这是只有一个Loader的情况，还会有Loader链式调用的情况～
webpack开发自定义功能loader
问白的博客
04-02 4598
webpack loader 开发 概述 使用webpack来开发一些自定义的loader，可以让我们更加深刻的认识和了解webpack的工作机制是怎么样的。 每一个loader都是一个函数，该函数在loader转换资源的时候调用。在该函数中可以使用this来访问上下文环境并可以使用一些 loader API, 比如 this.version表loader api的版本号、 this.contex...
webpack如何自定义一个loader？
willemwei023的博客
09-07 541
现代前端在开发过程中时常都会使用到webpack，用来对代码进行模块化打包。通常情况下，我们都是直接使用webpack的配置和别人写好的loader。如果自己要实现一个loader，需要怎么做？ 1. 什么是loader？ webpack是基于node的模块化打包工具，它本身也只能处理JS和JSON文件，没有处理CSS、图片等其他格式文件的能力。loader就相当于是一个翻译机，将这些文件翻译成webpack能处理的格式。换句话说，loader赋予了webpack处理其他文件的能力。 2. loader的使
详解webpack自定义loader初探
10-18
创建自定义 Loader 非常简单，只需要编写一个 Node.js 模块，并导出一个函数。这个函数接收源代码作为参数，并可以对其进行处理。例如，创建一个名为 `test-loader` 的 Loader，它的功能是进行文本替换： ```...
详解webpack loader和plugin编写
10-17
在编写 Loader 和 Plugin 时，理解这些配置非常重要，因为它们是与 Webpack 构建过程交互的基础。通过自定义 Loader 和 Plugin，你可以根据项目需求定制 Webpack 的行为，实现高效且符合项目特点的资源管理。
webpack的pitching loader详解
10-16
Webpack 是一个流行的模块打包...理解如何正确使用 pitching loader，可以帮助开发者编写更加高效且灵活的 Webpack 配置。在实践中，我们应该根据具体需求来考虑何时使用 pitching loader，以便更好地利用这一功能。
webpack4之如何编写loader的方法步骤
10-16
**Webpack 4 编写Loader的方法步骤** Webpack 是一个模块打包工具，它允许开发者将JavaScript、CSS、图片等资源转换成浏览器可识别的格式。在Webpack的生态系统中，Loader 负责处理不同类型的模块，如将ES6语法转换...
webpack中如何编写一个Loader
朝夕奔梦
03-15 1110
什么是Loader? 所谓 loader 只是一个导出为函数的 JavaScript 模块。这句话出自webpack的官方文档，那么现在我们可以知道其实loader就是一个函数，我们可以在这个函数里做一些事情。loader runner会调用这个函数，然后把上一个 loader 产生的结果或者资源文件(resource file)传入进去。 Loader的解析顺序？ 从下到上从右到左 知...
如何用 webpack 开发一个loader
qq_37833745的博客
08-03 676
设想：创建一个markdown-loader，用来加载 .md 文件 目录结构如下： 具体步骤如下： 1: 新建一个 about.md 文件， main.js 引入 about.md about.md # 关于我 我是sevenJi ，一个纠结大王～ main.js import about from './about.md' console.log(about) 2: 创建一个markdown-loader.js： 我们自定义的 loader 用来加载 ....
webpack扫盲——如何编写一个loader
小敏哥的专栏
12-05 889
目录 前言 一、关于loader 二、确认需求 三、loader编写 1.初始化 2.loader编写 3.增加可配置化代码 四、代码调试 前言 本文默认读者对前端工程化有一定的认识，对webpack有一定的裂解并且知道怎么使用webpack，本文会一步一步带领读者手动编写一个webpack的loader，以此加深对webpack的理解 一、关于loader loader是webpack里面一个相当重要的一个组成部分，用于将现有的代码转化成目标代码，最为人所知的就是babel，他能够
如何编写一个 Webpack Loader
大灰狼的小绵羊哥哥的博客
04-30 572
前言 在平时自己由零搭建项目时，虽然基础配置都比较熟悉，比如配置 file-loader, url-loader, css-loader 等，配置不难，但究竟是怎么起作用的呢，今天就来说说如何编写一个 Webpack Loader。 Loader 作用 按我自己的简单理解，loader 通常指打包的方案，即按什么方式来处理打包，打包的时候它可以拿到模块源代码，经过特定 loader 的转换后返回新的结果。 比如 sass-loader 可以把 SCSS 代码转换成 CSS 代码 编写 Loader
如何开发一个 Webpack Loader
油墨香^-^的博客
05-23 437
最近，项目用了 React，配套使用了 Webpack，毕竟热替换（react-hot-loader）吸引力确实高，开发模式下使用 webpack 构建其实也够用，并且相对 gulp-webpack 来说，模块的编译等待时间大大缩小，这是生命啊！ 发布时，借助 gulp 来进行其他方面的处理，如合图，打包等。或许把这些边幅修一修、支持下，Webpack 估计就要逆天了吧？ 仰望天空，还是脚踏实地，Webpack 虽非新鲜之物，但也没有多成熟。对应的 Plugin 及 Loader 的量并不多，还是有很多轮
如何编写一个webpack loader
大灰狼的小绵羊哥哥的博客
11-06 1484
loader是什么 webpack官方定义 A loader is just a JavaScript module that exports a function 从语法角度看，loader就是一个普通的Node.js模块，只是必须以函数格式导出来供使用。如果有必要可以使用一切Node.js功能模块。 从功能角度看，一个loader是在应用中作用于指定格式的资源文...
webpack自定义loader
我的博客简介
08-24 1889
发送到发
编写一个webpack的loader
04-14
编写Webpack loader可以让我们更好地处理我们的项目中的各种文件类型，比如CSS、图片等。为了编写一个Webpack loader，你需要创建一个函数，这个函数会接收源文件的内容，然后对其进行处理，最后以字符串形式返回...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

__畫戟__

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值