webpack-loader的使用

引入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"],
};

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

项目管理工具——使用甘特图制定项目计划的详细步骤

项目管理工具——使用甘特图制定项目计划的详细步骤

甘特图是一种直观的项目管理工具，它有助于我们清晰地展示任务安排、时间管理和项目的进度。以下是使用甘特图制定项目计划的详细步骤： 1、创建项目：首先，在进度猫中创建新的项目，并设置项目的时间、工作日等参数。根据…
阅读更多...
Day37｜贪心算法part06：738.单调递增的数字、968. 监控二叉树、贪心总结

Day37｜贪心算法part06：738.单调递增的数字、968. 监控二叉树、贪心总结

738. 单调递增的数字 总体思想就是从后往前遍历，比较第i位和第i1位的大小，不符合顺序char[i]减1，i1位填9，找到需要填9的最先位置，然后填9。 class Solution {public int monotoneIncreasingDigits(int n) {String s …
阅读更多...
请求分发场景下的鉴权问题

请求分发场景下的鉴权问题

说明：记录一次对请求分发，无法登录系统的问题。 场景 如下，在此结构下，如何判断该用户是已登录的用户； 常规操作，用户登录后给用户发Token，同时将发放的Token存入到Redis中。要求用户后续请求…
阅读更多...
halcon domain和region总结

halcon domain和region总结

1.domain是什么 在halcon中，ROI(Region Of Interest)被称为图像的域(domain)（参考《solution_guide_i.pdf》）。这个术语来自数学中的定义域，而图像就是函数，本函数负责将坐标映射到像素值，即f(x) gray这样…
阅读更多...
计算机网络——TCP和UDP协议

计算机网络——TCP和UDP协议

目录 前言 前篇 引言 TCP与UDP之间的区别 TCP 三次握手 为什么要三次握手而不是两次握手？ 丢包问题与乱序问题的解决 四次挥手 为什么客户端需要等待超时时间？ UDP协议 TCP和UDP的主要区别 前言 本博客是博主用于复习计算机网络的博客&…
阅读更多...
性能测试-数据库优化二（SQL的优化、数据库拆表、分表分区，读写分离、redis）

性能测试-数据库优化二（SQL的优化、数据库拆表、分表分区，读写分离、redis）

数据库优化 explain select 重点： type类型，rows行数，extra SQL的优化 在写on语句时，将数据量小的表放左边，大表写右边where后面的条件尽可能用索引字段，复合索引时，最好按复合索引顺序写wh…
阅读更多...
NGO-VMD+皮尔逊系数+小波阈值降噪+重构

NGO-VMD+皮尔逊系数+小波阈值降噪+重构

NGO-VMD皮尔逊系数小波阈值降噪重构 NGO-VMD皮尔逊系数小波阈值降噪重构代码获取戳此处代码获取戳此处 以西储大学轴承数据为例，进行VMD，且采用NGO进行K a参数寻优 并对分解分量计算皮尔逊相关系数筛选含噪声分量，对其进行小波软硬阈值降噪&a…
阅读更多...
网络协议——OSPF（开放式最短路径优先）详解

网络协议——OSPF（开放式最短路径优先）详解

1.什么是OSPF 开放式最短路径优先OSPF 是一种动态的高度可靠和高度可扩展的路由协议，用于构建大型网络中的动态路由系统 2. OSPF的协议号为：89 3. OSPF的特点: OSPF是链路状态协议使用了区域概念：减少路由选择协议对路由器CPU，…
阅读更多...
电磁兼容导论翻译疑问

电磁兼容导论翻译疑问

在读电磁兼容导论P71页时，发现在“注意“这句话翻译的和原文有疑问：我的理解是单边幅度谱是双边幅度谱的两倍。请大家帮忙看看应如何翻译。 英文原版：Note that all positive frequency components except the dc component in the two-side…
阅读更多...
【计算机毕业设计】基于微信小程序的开发项目150套(附源码+演示视频+LW)

【计算机毕业设计】基于微信小程序的开发项目150套(附源码+演示视频+LW)

大家好！我是程序猿老A，感谢您阅读本文，欢迎一键三连哦。 🧡今天给大家分享200的微信小程序毕业设计，后台用Java开发，这些项目都经过精心挑选，涵盖了不同的实战主题和用例，可做毕业设…
阅读更多...
解决mac本git安装后找不到命令的问题

解决mac本git安装后找不到命令的问题

不熟悉mac配置，折腾了半天，记录一下。 1.问题描述2.解决方法 1.问题描述 从https://sourceforge.net/projects/git-osx-installer/files/下载的git安装包： 安装时提示： 这里的解决办法是按住control键再打开文件安装。 安装完…
阅读更多...
Linux内核之互斥锁mutex_init和自旋锁spin_lock区别及用法实例(四十六)

Linux内核之互斥锁mutex_init和自旋锁spin_lock区别及用法实例(四十六)

简介： CSDN博客专家，专注Android/Linux系统，分享多mic语音方案、音视频、编解码等技术，与大家一起成长！ 优质专栏：Audio工程师进阶系列【原创干货持续更新中……】🚀 优质专栏：多媒…
阅读更多...
股权融资成本GLS模型计算

股权融资成本GLS模型计算

一、模型公式 式中： r 为股权融资成本 P为股价 B为每股净资产 FROE为预测每股净资产收益率 目标：求解股权融资成本r 二、模型口径参考来源 PS：实际以代码为准 ①FROE（预测每股净资产收益率）: 资本市场开放与…
阅读更多...
物联网实战--驱动篇之(五)TEA和AES加密算法

物联网实战--驱动篇之(五)TEA和AES加密算法

目录 一、前言 二、TEA算法 三、AES算法 四、加解密测试 五、安全性保障 一、前言 物联网的安全性是经常被提及的一个点，如果你的设备之间通讯没有加密的话，那么攻击者很容易就能获取并解析出报文的协议，从而根据攻击者的需要进行设备操…
阅读更多...
c# refc# substring c# 反射c# split c# websocket c# datatable使用

c# refc# substring c# 反射c# split c# websocket c# datatable使用

在C#编程中，ref关键字、Substring方法、反射（Reflection）、Split方法、WebSocket通信以及DataTable的使用都是常见的技术和方法。下面我将逐一为您详解这些内容。 1. C# ref关键字 ref关键字在C#中用于按引用传递参数。这意味着当您将变量作…
阅读更多...
当你的项目体积比较大？你如何做性能优化

当你的项目体积比较大？你如何做性能优化

在前端开发中，项目体积优化是一个重要的环节，它直接影响到网页的加载速度和用户体验。随着前端项目越来越复杂，引入的依赖也越来越多，如何有效地减少最终打包文件的大小，成为了前端工程师需要面对的挑战。以下是一些常…
阅读更多...
vim卡死了，没有反应怎么办？

vim卡死了，没有反应怎么办？

解决办法： 很有可能是你有个在window下的好习惯，没事儿就ctrl s保存文件。但是在vim里，ctrl s默认是发送一种流控制信号，通常用于停止终端的输出，所以你的屏幕就卡死了。 解决办法也很简单，按下ctrl q即…
阅读更多...
机器学习前导——PyCharm PyTorch Python3 机器学习

机器学习前导——PyCharm PyTorch Python3 机器学习

机器学习前导——PyCharm & pytorch & Python3 & 机器学习 文章目录 前言PyCharmPyTorchPython3机器学习联系 前言 这学期选了《机器学习》，第一次接触，对一些专有名词很陌生。 PyCharm PyCharm是一款由JetBrains开发的软件&#xff0c…
阅读更多...
python--递归算法篇

python--递归算法篇

1、给定一个包含n1个整数的数组nums，其数字在1到n之间（包含1和n）， 可知至少存在一个重复的整数，假设只有一个重复的整数，请找出这个重复的数 def repeat(ls:list) -> list:#把个数超过1的数&#xff0c…
阅读更多...
ppt技巧：如何将Word文档大纲中导入到幻灯片中？

ppt技巧：如何将Word文档大纲中导入到幻灯片中？

在PowerPoint中，将Word文档的大纲导入到新的幻灯片是一种非常实用的技巧。以下是详细的步骤： 首先，需要打开PowerPoint软件并打开原始的幻灯片文件。 在PowerPoint的顶部【开始】菜单栏中，找到并点击“新建幻灯片”按钮&#xff0…
阅读更多...
最新文章

Copyright @ 2022~2023