webpack-loader的使用

news2024/11/27 6:13:44

引入css后执行打包命令 "build": "npx webpack --config wk.config.js"发现报错：
在这里插入图片描述
在这里插入图片描述在这里插入图片描述

webpack默认只能处理js其他的像css,图片都需要借助loader来处理

css-loader

loader可以用于对模块的源代码进行转换，可以把css看成一个模块，模块可以通过import来加载，但是在加载模块时，webpack不知道如何对其进行加载，需要特定的loader完成这个功能。
npm i css-loader -D

const path = require("path");
module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./build"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [{loader:"css-loader"}],
      },
    ],
  },
};

module.rules中允许我们配置多个loader.。rules对应的值是一个数组[rule],数组中存放多个rule,rule是一个对象，有多个属性：
test:用于对资源进行匹配，通常会设置成正则表达式
use:对应的值是一个数组[useEntry] useEntry是一个数组也有一些属性

  1. loader:必须要一个loader属性，对应的值是一个字符串。只有一个loader时可以简写 例如use:[“css-loader”]
  2. options:可选的属性,只是一个字符串或对象
  3. query：目前已经被options给替代
    loader: use:[loader]的简写， 只有一个loader时也可以简写 loader:“css-loader”

简写：

//原来写法
 module: {
    rules: [
      {
        test: /\.css$/,
        use: [{loader:"css-loader"}],
      },
    ],
// 简写1
 module: {
    rules: [
      {
        test: /\.css$/,
        loader:"css-loader"
      },
    ],
  },
// 简写2
   module: {
    rules: [
      {
        test: /\.css$/,
        use:["csss-loader"]
      },
    ],
  },

style-loader

css-loader只能解决不报错的问题,但是css样式并没有生效。这是因为css-loader只负责解析css，不会将解析后的css插入到页面中，需要通过style-loader把样式插入到页面中。
npm i style-loader -D


const path = require("path");
module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./build"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};
// use: ["style-loader", "css-loader"], 也可以写成   use: [{ loader: "css-loader" }, { loader: "css-loader" }],

loader的执行顺序是从后往前执行的
在index.html中引入打包后的文件，就可以在页面中看到效果
在这里插入图片描述

sass-loader 解析sass

npm i sass-loader -D

编写sass并引入文件

在这里插入图片描述

配置sass-loader

const path = require("path");
module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./build"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
    ],
  },
};

postcss-loader

PostCSS是一个用JavaScript插件转换CSS的工具。它可以帮助开发人员处理CSS，包括自动添加浏览器前缀、CSS变量、嵌套规则、函数等
npm i postcss-loader -D
以 autoprefixer （会添加一些浏览器的前缀）为例

.在这里插入图片描述
由于postcss-loader有很多配置项，所以使用对象的形式：

const path = require("path");
module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./build"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: ["autoprefixer"],
                //也有这种写法plugins: [require("autoprefixer")],现在可以省略require()
              },
            },
          },
        ],
      },
    ],
  },
};

结果：
在这里插入图片描述
由于postcss配置项太多，postcss通常单独抽离出一个文件postcss.config.js:
在这里插入图片描述
在webpack中就可以简写了：

const path = require("path");
module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./build"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
    ],
  },
};

“autoprefixer"只能自动添加浏览器前缀，postcss还有其他功能，因此实际开发中并不会安装"autoprefixer”,而是使用 postcss-preset-env它可以将一些现代的css特性转换为浏览器所识别的特性。npm i postcss-preset-env -D
在这里插入图片描述

处理资源模块

在webpack5之前 加载这些资源需要使用一些loader，例如raw-loader,url-loader等。
在webpack5之后，可以直接使用资源模块类型(asset module type)来代替上面这些loader。

资源模块的类型分为 asset/resource ,asset/inline,asset/source,asset。

asset/resource:发送一个单独的文件并导出url(之前通过file-loader来),如果有两个图片，在打包后会生成两个文件，这就意味着还要发送额外的请求。

const path = require("path");
module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./build"),
  },
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        type: "asset/resource",
      },
    ],
  },
};

这里要注意图片也要当作一个模块来导入
在这里插入图片描述
执行命令后可以看到打包后的结果：
在这里插入图片描述

asset/inline：将图片进行base64编码，并把编码后的源码打包到js文件中。会造成js文件非常大，下载和解析js文件需要的时间长。

onst path = require("path");
module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./build"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
      {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        type: "asset/inline",
      },
    ],
  },
};

打包后的js文件
在这里插入图片描述
这里还加了一个背景图.bgi { background-image: url(../asset/1.png); } img和background-image的url都是base64格式的
在这里插入图片描述
asset/source：是将图片的源码打包到js文件中和asset/inline一样会造成js文件过大。

const path = require("path");
module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./build"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,。
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
      {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        type: "asset/source",
      },
    ],
  },
};

在这里插入图片描述
asset:可以根据需要生成一个单独的文件，或打包到js中。

const path = require("path");
module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./build"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
      {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        type: "asset",
      },
    ],
  },
};

一般type会设置为asset，将较小的文件进行base64编码，较大的文件单独打包。

根据文件大小打包

const path = require("path");
module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./build"),
  },
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 4 * 1024,
          },
        },
      },
    ],
  },
};

//webpack官网:https://www.webpackjs.com/configuration/module/#ruleparserdataurlcondition
// 如果一个模块源码大小小于 maxSize，那么模块会被作为一个 Base64 编码的字符串注入到包中， 否则模块文件会被生成到输出的目标目录中。
//dataUrlCondition 还可以写成函数的形式

在这里插入图片描述

对打包后的文件名，文件目录进行操作

可以在output中对打包后生成的文件进行操作，比如修改文件名。但是在这里修改会影响所有的文件，不推荐在这里修改。

// 这里也是可以支持[hash][ext][query]的
const path = require("path");
module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./build"),
    assetModuleFilename: "aa.png",
  },
  module: {
    rules: [ ],
  },
};

应该针对对应的文件修改：

const path = require("path");
module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./build"),
  },
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 4 * 1024,
          },
        },
        generator: {
          filename: "img/[hash][ext]",
        },
      },
    ],
  },
};
// webpack官网：https://www.webpackjs.com/configuration/module/#rulegeneratorfilename
//这里其实还可以控制生成的hash值的长度 img/[hash:8][ext]

在这里插入图片描述

到目前为止所有的代码

//webpack
const path = require("path");
module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./build"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
      {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 4 * 1024,
          },
        },
        generator: {
          filename: "img/[hash][ext]",
        },
      },
    ],
  },
};


//postcss.config.js
module.exports = {
  plugins: ["postcss-preset-env"],
};

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Transformer模型-decoder解码器，target mask目标掩码的简明介绍

Transformer模型-decoder解码器，target mask目标掩码的简明介绍

今天介绍transformer模型的decoder解码器，target mask目标掩码 背景 解码器层是对前面文章中提到的子层的包装器。它接受位置嵌入的目标序列，并将它们通过带掩码的多头注意力机制传递。使用掩码是为了防止解码器查看序列中的下一个标记。它迫使模型仅使用…
阅读更多...
【高效开发工具系列】obsutil安装与使用

【高效开发工具系列】obsutil安装与使用

💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…
阅读更多...
广州图创 图书馆集群管理系统 updOpuserPw SQL注入漏洞复现

广州图创 图书馆集群管理系统 updOpuserPw SQL注入漏洞复现

0x01 产品简介 广州图创计算机软件开发有限公司是集产品研发、应用集成、客户服务为一体的高新技术企业，主要目标是为图书馆行业用户提供高质量的应用软件系统设计、集成和维护服务。 0x02 漏洞概述 由于广州图创 图书馆集群管理系统 updOpuserPw 接口处未对用户输入的SQL语…
阅读更多...
minio-docker单节点部署SDK测试文件上传下载

minio-docker单节点部署SDK测试文件上传下载

目录 一，docker部署minio单节点单磁盘 二，SDK测试上传下载 一，docker部署minio单节点单磁盘 1.拉取镜像 # 下载镜像 docker pull minio/minio 2.查看镜像 docker images 3.启动minio(新版本) 创建本机上的挂载目录，这个可以…
阅读更多...
鸿蒙OS开发学习：【第三方库调用】

鸿蒙OS开发学习：【第三方库调用】

介绍 本篇Codelab主要向开发者展示了在Stage模型中，如何调用已经上架到[三方库中心]的社区库和项目内创建的本地库。效果图如下： 相关概念 [Navigation]：一般作为Page页面的根容器，通过属性设置来展示页面的标题、工具栏、菜单。…
阅读更多...
【AIGC】本地部署通义千问 1.5 (PyTorch)

【AIGC】本地部署通义千问 1.5 (PyTorch)

今天想分享一下 Qwen 1.5 官方用例的二次封装（ huggingface 说明页也有提供源码），其实没有太多的技术含量。主要是想记录一下如何从零开始在不使用第三方工具的前提下，以纯代码的方式本地部署一套大模型，相信这对于技术…
阅读更多...
50. QT/QML中创建多线程的方式汇总

50. QT/QML中创建多线程的方式汇总

1. 说明 在QT / QML中创建线程主要有三种方式。第一种：在定义类时继承 QThread 这个类，然后重写父类的虚函数 run()，将子线程需要执行的业务代码放到 run() 函数当中即可。**注意：**这种方式官方已经摒弃了。第二种：使用moveToThread()函数将需要在子线程中执行的函数类移…
阅读更多...
软件设计师-基础知识科目-标准化与软件知识产权基本知识11

软件设计师-基础知识科目-标准化与软件知识产权基本知识11

十一、标准化与软件知识产权基本知识： 知识产权： 主要包括：著作权及邻接权、专利权、工业品外观设计权、商标权、地理标志权、继承电路布图设计权。邻接权是指与著作权相邻近的权利，是指作品传播者，对其传播作品过程…
阅读更多...
文献速递：深度学习肝脏肿瘤诊断---基于多相增强 CT 和临床数据的恶性肝肿瘤鉴别诊断深度学习

文献速递：深度学习肝脏肿瘤诊断---基于多相增强 CT 和临床数据的恶性肝肿瘤鉴别诊断深度学习

Title 题目 Deep learning for diferential diagnosisof malignant hepatic tumors based on multi-phase contrast-enhanced CT and clinical data 基于多相增强 CT 和临床数据的恶性肝肿瘤鉴别诊断深度学习 Abstract 摘要 Liver cancer remains the leading cause of can…
阅读更多...
中介者模式：简化对象间通信的协调者

中介者模式：简化对象间通信的协调者

在面向对象的软件开发中，中介者模式是一种重要的行为型设计模式，用于降低多个对象间通信的复杂性。通过提供一个中心化的对象来处理不同组件之间的交互，中介者模式使得组件间不必显式引用彼此，从而使其松散耦合、更易于维护。本文…
阅读更多...
ElasticSearch中使用bge-large-zh-v1.5进行向量检索（一）

ElasticSearch中使用bge-large-zh-v1.5进行向量检索（一）

一、准备 系统：MacOS 14.3.1 ElasticSearch：8.13.2 Kibana：8.13.2 BGE是一个常见的文本转向量的模型，在很多大模型RAG应用中常常能见到，但是ElasticSearch中默认没有。BGE模型有很多版本，本次采用的是bg…
阅读更多...
享元模式：优化资源利用的高效策略

享元模式：优化资源利用的高效策略

在面向对象的软件开发中，享元模式是一种结构型设计模式，旨在减少内存使用，通过共享尽可能多的相似对象来提高应用程序的效率。本文将详细介绍享元模式的定义、实现、应用场景以及优缺点。 1. 享元模式的定义 享元模式（Flyweigh…
阅读更多...
手写一个简单的 OrbitControls 轨道控制器

手写一个简单的 OrbitControls 轨道控制器

手写一个简单的 OrbitControls 轨道控制器 相信使用过THREE.JS的同学，都知道 OrbitControls 这个的轨道控制器，他是绕着一个观察点，来进行什么什么的… 反正就是那么个意思。 所以很明显OrbitControls的运动轨迹是一个球体，他是绕…
阅读更多...
软件定义车队面临网络安全的曲折之路

软件定义车队面临网络安全的曲折之路

当以色列 REE Automotive 设计其 P7 电动汽车底盘时，它是从软件开始工作的：扁平的车辆底盘完全可配置，每个轮胎附近有四个独立的模块，用于转向、制动、悬架和动力传动系统，每个模块均由电子驱动控制单元（EC…
阅读更多...
JavaEE初阶——多线程(二)

JavaEE初阶——多线程(二)

T04BF 👋专栏: 算法|JAVA|MySQL|C语言 🫵 小比特 大梦想 此篇文章延续上一篇文章,与大家分享Thread常见的方法以及线程的状态相关知识 其他内容我们下一篇再见! 如果有错误或不足请您指出!!! 目录 3.Thread类及常见方法3.1Thread常见的构造方法3.2Thread…
阅读更多...
【小技巧】机器学习中可视化高维向量的两种方法PCA和t-SNE,以及其原理介绍和代码示例(附代码)

【小技巧】机器学习中可视化高维向量的两种方法PCA和t-SNE,以及其原理介绍和代码示例(附代码)

使用情景：比如说现在我有一批numpy的多维向量，比如说都是256维度的，X.shape(n, 256), 已知它们都是经过训练能够在256dim的超球面上实现分类或聚类的，现在我想把它们可视化出来看看各个簇在超球面上的分布是怎样的？ 1…
阅读更多...
C++的stack和queue类（三）：适配所有容器的反向迭代器

C++的stack和queue类（三）：适配所有容器的反向迭代器

目录 前言 list的反向迭代器 list.h文件 ReverseIterator.h文件 test.cpp文件 前言 迭代器按性质分类： 单向：forward_list双向：list随机：vector / deque 迭代器按功能分类： 正向反向const list的反向迭代器…
阅读更多...
抽象工厂模式：深入探索面向对象设计的多样性

抽象工厂模式：深入探索面向对象设计的多样性

在软件开发中，正确地应用设计模式对于构建可扩展、可维护和高效的系统至关重要。抽象工厂模式作为创建型设计模式之一，提供了一个高层接口，用于创建一系列相关或依赖对象，而无需指定它们具体的类。本文将详细介绍抽象工厂模式的概…
阅读更多...
【虚幻引擎】DTProjectSettings 蓝图获取基本项目配置插件使用说明 获取项目命名，项目版本，公司名，公司识别名，主页，联系方式

【虚幻引擎】DTProjectSettings 蓝图获取基本项目配置插件使用说明 获取项目命名，项目版本，公司名，公司识别名，主页，联系方式

本插件可以使用蓝图获取到项目的一些基本配置，如获取：公司名、公司识别名、版权声明、描述、主页、许可条款、隐私政策、项目ID、项目命名、项目版本、支持联系方式、项目显示标题、项目调试标题信息、应保留窗口宽高比、使用无边框窗口、以VR启动、允许…
阅读更多...
ASP.NET MVC企业级程序设计 (EF＋MVP实现显示数据)

ASP.NET MVC企业级程序设计 (EF＋MVP实现显示数据)

效果图 实现过程 1创建数据库 2创建项目文件 3创建控制器，右键添加，控制器 注意这里要写Home 创建成功 数据模型创建过程之前作品有具体过程 4创建视图，右键添加视图 5HomeController.cs代码 using System; using System.Collections.Gene…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023