webpack（三）loader

news2024/11/15 2:05:22

定义

loader用于对模块的源代码进行转换，在imporrt或加载模块时预处理文件
webpack做的事情，仅仅是分析出各种模块的依赖关系，然后形成资源列表，最终打包生成到指定文件中。
在这里插入图片描述

在webpack内部，任何文件都是模块，不仅仅是js文件
默认情况下，遇到import或者require加载模块时，webpack只支持对js和json文件的打包，像css、scss、png等这些类型的文件，webpack则无能为力，这时候就需要配置对应的loader进行文件内容的解析。
当webpack碰到不识别的模块的时候，webpack会在配置当中查找该文件的解析规则。

使用

配置方式

  • 配置文件配置
    关于loader的配置，我们是写在module.rules属性中
    • rules是一个数组的形式，可以配置多个loader
    • 每一个loader对应一个对象的形式。test：正则表达式匹配规则；use:针对匹配到文件类型，调用对应的loader进行处理
  module: {
        rules: [
            // {
            //     test: /\.css$/, //正则表达式，用于匹配要处理的文件类型
            //     use: [
            //         {
            //             loader:'css-loader'
            //         }
            //     ]
            // },
            // { //简写 一个loader，不需要参数
            //     test:/\.css$/,
            //     loader:'css-loader'
            // }

            {
                test: /\.css$/,
                //  loader执行顺序从下往上，从右往左
                // use: ['css-loader','style-loader']
                // css-loader：处理css 由于webpack无法识别
                // style-loader：在页面上生成一个style标签 把处理好的样式添加到页面上
                use: ['style-loader', 'css-loader']
            }, {
                test: /.\less$/,
                // less-loader 需要less先将文件转为css
                use: ['style-loader', 'css-loader', 'less-loader']
            }
        ]
    }
  • 内联方式配置:在每个 import 语句中显式指定 loader
 import 'css-loader!../css/login.css'
  • CLI配置:在 shell 命令中指定它们

特性

  • loader支持链式调用， 执行顺序从下往上，从右往左，链中的每个loader会处理之前已处理过的资源，最终变为js代码。
  • loader 可以是同步的，也可以是异步的
  • loader 运行在 Node.js 中，并且能够执行任何操作
  • 插件(plugin)可以为 loader 带来更多特性
    可以通过loader的预处理函数，为js生态系统提供更多能力。用户现在可以更加灵活的引入细粒度逻辑，例如：打包、压缩、语言翻译和其它更多特性。

常见loader

在页面开发过程中，加载除了js之外的内容就需要配置loader进行加载

css-loader

分析 css 模块之间的关系，并合成⼀个 css

npm install --save-dev css-loader
rules: [
  ...,
 {
  test: /\.css$/,
    use: {
      loader: "css-loader",
      options: {
     // 启用/禁用 url() 处理
     url: true,
     // 启用/禁用 @import 处理
     import: true,
        // 启用/禁用 Sourcemap
        sourceMap: false,
        //css在工作过程中又找到了需要处理的css，就需要往前找一个loader进行处理
        importLoaders:1 
      }
    }
 }
]

如果只通过css-loader加载文件，这时候页面代码配置没生效，因为css-loader只是负责将.css文件进行解析，并不会将解析后的css插入到页面中，如果我们希望再完成插入style的操作，那么我们还需要另外一个loader，就是style-loader.

style-loader

把 css-loader 生成的内容，用 style 标签挂载到页面的 head 中

npm install --save-dev style-loader
rules: [
  ...,
 {
  test: /\.css$/,
    use: ["style-loader", "css-loader"]
 }
]

less-loader/scss-loader

npm install less-loader -D
rules: [
  ...,
 {
  test: /\.css$/,
    use: ["style-loader", "css-loader","less-loader"]
 }
]

babel前置工具：browserslist

项目开发过程中需要考虑浏览器的兼容性，browserslist帮助我们请求会数据
可以从caniuse.com中查看目前浏览器的使用状态
两种配置方式:

// 方式一：package.json
"browserslist":[
        ">1%",
        "last 2 version",
        "not dead"
    ]
// 方式二：新建.browserslistrc文件
> 1%
last 2 versions
not dead

项目在安装webpack之后，会带有browserslist包，里面引入了caniuse-lite
在这里插入图片描述

postcss-loader前置：postcss

postcss是通过js转换css的工具
样式测试网站地址：https://autoprefixer.github.io/
如果我们不先试用loader而是利用postcss本身通过命令行进行自动添加前缀

  • npm i postcss-cli -D:能够在命令行使用
  • npm i autoprefixer -D：自动添加前缀

执行npx postcss --use autoprefixer -o ret.css ./src/css/test.css
在这里插入图片描述

postcss-preset-env：多css处理

如果我们的代码中还需要进行其它样式的处理，还需要单独配置，比如color:#12345678支持8位数，后面两位为rgba中的透明度，针对多css处理情况可以使用postcss-preset-env其中包含多个css处理，并且包含autoprefixer

{
                test: /\.css$/,
                //  loader执行顺序从下往上，从右往左
                // use: ['css-loader','style-loader']
                // css-loader：处理css 由于webpack无法识别
                // style-loader：在页面上生成一个style标签 把处理好的样式添加到页面上
                use: ['style-loader', 'css-loader', {
                    loader: 'postcss-loader',
                    options: {
                        postcssOptions: {
                            // plugins: [require('autoprefixer'),require('postcss-preset-env')]
                            plugins: ['postcss-preset-env']
                        }
                    }
                }]
            },

我们项目中，less文件也可能需要用到这个配置，就可以抽离出来

//  postcss.config.js
module.exports = {
    plugins: [
        require('postcss-preset-env')
        // require('autoprefixer')
    ]
}

在webpack.config.js中

use: ['style-loader', 'css-loader',
                    'postcss-loader',
                    'less-loader']

file-loader

rules: [
  ...,
 {
  test: /\.(png|jpe?g|gif)$/,
    use: {
      loader: "file-loader",
      options: {
      	// esModule:false,  不转为esModule
        // placeholder 占位符 [name] 源资源模块的名称
        // [ext] 源资源模块的后缀
        name: "[name]_[hash].[ext]",
        //打包后的存放位置
        outputPath: "./images",
        // 打包后文件的 url
        publicPath: './images',
      }
    }
 }
]

url-loader

可以处理理 file-loader 所有的事情，但是遇到图片格式的模块，可以选择性的把图片转成 base64 格式的字符串，并打包到 js 中，对小体积的图片比较合适，大图片不合适。

rules: [
  ...,
 {
  test: /\.(png|jpe?g|gif)$/,
    use: {
      loader: "url-loader",
      options: {
        // placeholder 占位符 [name] 源资源模块的名称
        // [ext] 源资源模块的后缀
        name: "[name]_[hash].[ext]",
        //打包后的存放位置
        outputPath: "./images"
        // 打包后文件的 url
        publicPath: './images',
        // 小于 100 字节转成 base64 格式
        limit: 100
      }
    }
 }
]

asset module type

在webpack5中内置了，不需要安装。在webpack5之前采用file-loader或者url-loader处理图片,在webpack5直接采用aeest进行处理即可。

  • asset/resource -->file-loader
  • asset/inline–>url-loader
  • asset/source–>raw-loader

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

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

相关文章

堆的 shift up（Java 实例代码）

堆的 shift up（Java 实例代码）

目录 堆的 shift up Java 实例代码 src/runoob/heap/HeapShiftUp.java 文件代码： 堆的 shift up 本小节介绍如何向一个最大堆中添加元素，称为 shift up。 假设我们对下面的最大堆新加入一个元素52，放在数组的最后一位，52大于父…
阅读更多...
蓝桥杯 2240. 买钢笔和铅笔的方案数c++解法

蓝桥杯 2240. 买钢笔和铅笔的方案数c++解法

最近才回学校。在家学习的计划不翼而飞。但是回到学校了，还是没有找回状态。 现在是大三了，之前和同学聊天，说才大三无论是干什么，考研，找工作，考公，考证书 还都是来的及的。 但是心里面…
阅读更多...
深度刨析数据在内存中的存储

深度刨析数据在内存中的存储

✨博客主页：小钱编程成长记 🎈博客专栏：进阶C语言 深度刨析数据在内存中的存储 1.数据类型介绍1.1 类型的基本归类 2.整形在内存中的存储2.1 原码、反码、补码2.2 大小端介绍 3.浮点型在内存中的存储3.1 一个例子3.2 浮点数的存储规则3.3指数…
阅读更多...
树和二叉树基础

树和二叉树基础

引言： 树是一种非线性的结构，也是由一个一个的结点构成。 树的一些基本概念： 节点的度：一个节点含有的子树的个数称为该节点的度；如上图：A的度为6 叶节点或终端节点：度为0的节点称为叶节点。…
阅读更多...
聊天机器人将取代人工客服？电商界的超级“贵人”

聊天机器人将取代人工客服？电商界的超级“贵人”

聊天机器人在全球范围内取得了成功，目前有58%的 B2B公司和42%的 B2C公司使用聊天机器人，而且这个数字预计还会继续增长。原因有很多，聊天机器人能够模拟人类交互并每天 24小时提供客户服务。当客户有疑问时，不用等上几小时才能得到…
阅读更多...
【RabbitMQ】RabbitMQ 服务无法启动。系统出错。发生系统错误 1067。进程意外终止。

【RabbitMQ】RabbitMQ 服务无法启动。系统出错。发生系统错误 1067。进程意外终止。

问题描述 RabbitMQ 服务无法启动。 rabbitmq-service.bat startRabbitMQ 服务正在启动 . RabbitMQ 服务无法启动。系统出错。发生系统错误 1067。进程意外终止。原因分析 RabbitMQ和Erlang版本不匹配。 解决方案 查询并安装RabbitMQ版本对应Erlang版本 https://www.rabbitm…
阅读更多...
[ROS]yolov8部署ROS

[ROS]yolov8部署ROS

Yolov8是一种基于PyTorch深度学习框架的轻量级目标检测算法，具有高效、准确和快速的特点，因此在机器人领域得到了广泛的应用。而ROS（Robot Operating System）是一个用于机器人软件开发的框架，提供了各种工具和库&#…
阅读更多...
高级DBA带你解决达梦国产数据库数据同步至clickhouse数据库通用方法（全中国唯一一份）关键技术讲解

高级DBA带你解决达梦国产数据库数据同步至clickhouse数据库通用方法（全中国唯一一份）关键技术讲解

步骤1、安装达梦8国产数据库 参考笔者之前写的博文，怎么安装国产达梦8数据库，按博文提前装好！ https://blog.csdn.net/nasen512/article/details/126872483 步骤2、安装好clickhouse数据库 参考笔者之前写过的博文，将clickho…
阅读更多...
Hadoop HDFS 高阶优化方案

Hadoop HDFS 高阶优化方案

目录 一、短路本地读取：Short Circuit Local Reads 1.1 背景 ​1.2 老版本的设计实现 ​1.3 安全性改进版设计实现 1.4 短路本地读取配置 1.4.1 libhadoop.so 1.4.2 hdfs-site.xml 1.4.3 查看 Datanode 日志 二、HDFS Block 负载平衡器：Balan…
阅读更多...
python通过docker打包执行

python通过docker打包执行

背景 正常情况下，python脚本执行需要安装有python环境，那python环境虽然也可以通过移植的方法来安装，那总归是比较麻烦的，下面通过docker打包的方式来执行python脚本 1、安装python镜像 准备两个文件即可，dockerfile、requirements.txt两个文件的内容分别如下 同目录下…
阅读更多...
如何做好住宅区门禁监控，这回总算说全了

如何做好住宅区门禁监控，这回总算说全了

门禁监控在现代社会中已经变得愈发重要，特别是在住宅小区。随着城市化进程的加速和人口密度的增加，住宅小区的安全管理成为了一个至关重要的挑战。为了确保居民的安全和财产的保护，门禁监控系统逐渐成为了必备的设施之一。 客户案例 太原某小…
阅读更多...
人大金仓V8数据库安装补充资料

人大金仓V8数据库安装补充资料

之前写过一篇人大金仓数据库安装文档，自我感觉太过简练。这里补充一些资料。 命令行安装过程中，英文提示还比较简单。 安装默认第一项是完整安装，第二项是安装客户端软件，第三项是自定义安装。 这里选择了第一项。 File Path需要输入license文件的绝对路径且包括文件名。…
阅读更多...
Jetpack Compose Accompanist最近的更新-2023年8月25日

Jetpack Compose Accompanist最近的更新-2023年8月25日

Jetpack Compose Accompanist最近的更新-2023年8月25日 这篇文章更新了Jetpack Compose Accompanist库的情况，介绍了其目的和最新上传的功能，包括Pager、Flow Layout、Navigation Animation和Insets-UI。同时，提到了对一些库未来发展的讨论。…
阅读更多...
光伏瓦屋顶

光伏瓦屋顶

光伏瓦是由非晶硅材料制成的有光伏电池的屋面板，把光伏组件嵌入支撑结构，使太阳能板和建筑材料结为一体，直接应用于屋顶，和普通屋面瓦一样安装在屋面结构上。然后，光伏材料和组件将光转化为电能，通过吸收太…
阅读更多...
5步搞定！！1Centos 7设置elasticsearch 7.12.1开机自启动

5步搞定！！1Centos 7设置elasticsearch 7.12.1开机自启动

搞虚拟机玩，从网上看了很多es开机自启的方法，都试了，没有效果，最后尝试了shell脚本的方式，记录一下！ .sh文件内容： #!/bin/bash export JAVA_HOME/path/to/elasticsearch/jdk export JRE_HOME$…
阅读更多...
Mybatis学习|基本的crud、数据库字段与对照类字段不一致问题

Mybatis学习|基本的crud、数据库字段与对照类字段不一致问题

1.查询：根据id去查用户 在Dao层的UserMapper接口中增加根据id查用户的方法，定义方法名、传的参数以及返回值 在与UserMapper接口绑定的UserMapper.xml中配置该方法对应的sql语句 编写测试用例 2.增加：插入一个新用户 在Dao层的UserMapper接…
阅读更多...
Spring源码分析（十）Bean实例化（下）

Spring源码分析（十）Bean实例化（下）

目录 1.1 循环依赖1.2 属性填充1.2.1 populateBean方法1.2.2 initializeBean方法执行Aware方法执行BeanPostProcessor后置处理器的前置处理方法执行初始化方法执行BeanPostProcessor后置处理器的后置处理方法：postProcessAfterInitialization()，允许对be…
阅读更多...
低代码在未来会颠覆开发行业吗？

低代码在未来会颠覆开发行业吗？

今天是正经男，我们严肃讨论一下一直以来争吵不休的取代问题。 低代码开发平台，低代码技术会取代开发人员么？ 一、背景 低代码开发平台的普及，让很多公司对快速生成应用抱有很大期望。甚至有人认为，低代码开发平台未来会…
阅读更多...
IntelliJ IDEA 2023.2.1 Android开发变化

IntelliJ IDEA 2023.2.1 Android开发变化

IntelliJ IDEA 2023.2.1之前的版本，Empty Activity是指Empty View Activity，而现在Empty Activity是指Empty Compose Activity，另外多了一个Empty View Activity的选项 这表明官方推荐使用Compose这种声明式的编程方式来描述UI，命…
阅读更多...
正中优配：炒股软件自动提示买卖点？

正中优配：炒股软件自动提示买卖点？

股票商场好像大海般改变多端，许多股民往往由于没有精确的生意点而错失良机，导致亏损惨重。在这种情况下，许多炒股爱好者就开始寻觅主动提示生意点的炒股软件，以便在股票商场中抢占先机。 可是，真的有这样奇特的炒股软…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023