详细介绍Webpack5中的Loader

这篇具有很好参考价值的文章主要介绍了详细介绍Webpack5中的Loader。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

loader用于帮助 webpack 将不同类型的文件转换为 webpack 可识别的模块。
详细介绍Webpack5中的Loader,前端,# Webpack,Webpack5,Loader,前端,打包工具,原力计划

优先级分类

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 方法。
详细介绍Webpack5中的Loader,前端,# Webpack,Webpack5,Loader,前端,打包工具,原力计划
在这个过程中如果任何 pitch 有返回值,则 loader 链被阻断。webpack 会跳过后面所有的的 pitch 和 loader,直接进入上一个 loader 。
详细介绍Webpack5中的Loader,前端,# Webpack,Webpack5,Loader,前端,打包工具,原力计划

loader API

详细介绍Webpack5中的Loader,前端,# Webpack,Webpack5,Loader,前端,打包工具,原力计划
更多可查看:这里。

自定义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;

参考文档文章来源地址https://www.toymoban.com/news/detail-610493.html

到了这里,关于详细介绍Webpack5中的Loader的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Webpack5 core-js和babel-loader区别和用法

    core-js是一个流行的JavaScript库,它提供了对新的JavaScript特性、API和方法的兼容性支持。它通过模拟缺失的功能,并提供 polyfill 来使这些功能可以在旧版浏览器中正常运行 polyfill 翻译过来叫做垫片/补丁。就是用社区上提供的一段代码,让我们在不兼容某些新特性的浏览器上,

    2024年02月13日
    浏览(39)
  • 《基于 Vue 组件库 的 Webpack5 配置》1.模式 Mode 和 vue-loader

    一定要配置 模式 Mode,这里有个小知识点,环境变量 process.env.NODE_ENV 一定要配置 vue-loader Vue Loader v15 现在需要配合一个 webpack 插件才能正确使用; 一个 webpack 的 loader,它允许你以一种名为单文件组件 (SFCs)的格式撰写 Vue 组件; vue-loader 和 vue-template-compiler 要一起安装,以保

    2024年02月11日
    浏览(42)
  • Webpack5入门到原理22:提升打包构建速度

    开发时我们修改了其中一个模块代码,Webpack 默认会将所有模块全部重新打包编译,速度很慢。 所以我们需要做到修改某个模块代码,就只有这个模块代码需要重新打包编译,其他模块不变,这样打包速度就能很快。 HotModuleReplacement(HMR/热模块替换):在程序运行中,替换、

    2024年01月21日
    浏览(47)
  • Cannot read properties of undefined (reading ‘styles‘),使用webpack5搭建vue项目,vue-loader报错解决

    跟着官网,尝试在webpack5中加载vue文件时报错: Cannot read properties of undefined (reading ‘styles’) 其中版本vue-loader@17.0.0,vue-template-compiler和vue都是2.7 百度之后看到有人说是vue-loader版本问题,然后在vue-loader的github的issue里找到了相关的问答: 意思是vue2的话,vue-loader版本要低于等于

    2024年01月23日
    浏览(42)
  • node.js+NPM包管理器+Webpack打包工具+前端项目搭建

    javascript运行环境(无需依赖html文件) BFF,服务于前端的后端 官网下载安装,node -v查看是否安装成功 ①、创建一个01.js文件 ②、通过CMD命令执行(或者通过工具的集成终端) node 01.js 如果出现权限原因,可以通过管理员方式打开工具 ③、通过浏览器访问http://127.0.0.1:8888 如

    2024年02月07日
    浏览(73)
  • 【快速搞定Webpack5】修改输出文件目录及自动清理上次打包文件(五)

    默认情况下 webpack 打包后,我们的图片和 js 等文件都会被打包到 dist 目录下,文件多了混淆在一起一方面不利于文件的查找和管理,另外一方面看上去也不美观。 所以今天我们学习的内容就是控制输出后的文件进入不同的目录。 新增47-49行配置 官方手册参考 前面学习过程中

    2024年02月22日
    浏览(48)
  • 前端工程化第一章:webpack5基础(上)

    Webpack 是一个现代 JavaScript 应用程序的静态模块 打包器 。它是一个用于 将代码编译成浏览器可识别的格式 的工具。 webpack 可以实现以下的功能: 代码转换 : TypeScript 编译成 JavaScript 、 SCSS 、 less 编译成 CSS 等。 文件优化 :压缩 JavaScript 、 CSS 、 HTML 代码, 压缩合并图片

    2024年02月16日
    浏览(47)
  • 前端工程化第三章:webpack5基础(下)

    TypeScript 是一种静态类型的编程语言,是 JavaScript 的一个超集。它由 微软开发,提供了许多 JavaScript 不支持的功能,比如 类型检查 、 接口和类 。 ts-loader 是 Webpack 中的一个加载器,用于将 TypeScript 代码转换成 JavaScript 代码。它是基于 typescript 编译器实现的,支持所有 TypeS

    2024年02月16日
    浏览(50)
  • Webpack5入门到原理14:生产模式介绍

    生产模式是开发完成代码后,我们需要得到代码将来部署上线。 这个模式下我们主要对代码进行优化,让其运行性能更好。 优化主要从两个角度出发: 优化代码运行性能 优化代码打包速度 我们分别准备两个配置文件来放不同的配置 因为文件目录变了,所以所有绝对路径需要

    2024年01月23日
    浏览(62)
  • 【快速搞定Webpack5】介绍及基本使用(一)

    他会以一个或多个文件作为打包的入口,将我们整个项目所有文件编译组合成一个或多个文件输出出去。 输出的文件就是编译好的文件,就可以在浏览器端运行了。 我们将 webpack 输出的文件叫做 bundle 。 (将浏览器不识别的语法编译成识别的语法) webpack 本身功能是有限的:

    2024年02月21日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包