webpack图片压缩_webpack的cdn

webpack图片压缩_webpack的cdn图片处理url-loader(webpack5之前的处理方式)在项目开发中,我们时长会需要使用到图片,比如在img文件夹中有图片test1.png,然后在normal.css中会引用到图片body

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

图片处理url-loader(webpack5之前的处理方式)

在项目开发中,我们时长会需要使用到图片,比如在img文件夹中有图片test1.png,然后在normal.css中会引用到图片

body{
    background: url("../img/test1.png");
}

但是此时,我们直接使用webpack打包是会报错的,我们需要安装url-loader,它是用于将文件转换为 base64 URI 的 loader

安装命令如下:

npm install url-loader --save-dev

url-loader 功能类似于 file-loader, 但是在文件大小(单位为字节)低于指定的限制时,可以返回一个 DataURL

接着我们在webpack.config.js中配置url-loader的设置

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif|jpeg)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
            },
          },
        ],
      },
    ],
  },
};

此时,如果我们的图片test1.png的大小小于8192k,那么就可以打包成功,但是如果我们的图片大于8192k,此时就需要安装file-loader

安装命令如下:

npm install file-loader --save-dev

然后,在 webpack.config.js 配置中添加 loader。例如:

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              publicPath: "dist/"
            }
          },
        ],
      },
    ],
  },
};

注意:配置时如果你同时配置了url-loader,一定要把url-loader的配置注释掉
此时如果我们进行打包,打包出来的图片名字是随机的哈希值字符串,例如1b959a13f661bd214696460400b8c8d0.png,如果我们想自定义名字,则需要进行配置option选项,具体参数可以参考官网
 

资源模块

webpack5之前我们处理静态资源比如。图片字体之类的资源的时候等,需要用到url-loaderfile-loaderraw-loaderwebpack5则放弃了这三个loader,这三个loadergithub上也停止了更新。

webpack5使用四种新增的资源模块(Asset Modules)替代了这些loader的功能。

  • asset/resource 将资源分割为单独的文件,并导出url,就是之前的 file-loader的功能.
  • asset/inline 将资源导出为dataURL(url(data:))的形式,之前的 url-loader的功能.
  • asset/source 将资源导出为源码(source code). 之前的 raw-loader 功能.
  • asset 自动选择导出为单独文件或者 dataURL形式(默认为8KB). 之前有url-loader设置asset size limit 限制实现。
     

案例

我们这里以assert/inline为例子,进行配置

const path = require('path')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.png/,
        type: 'asset/inline'
      },
    ],
  },
}

此时,再进行打包,png格式的图片都会被作为 data URI 注入到 bundle 中。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/165385.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • GTest 总结_gtest单元测试

    GTest 总结_gtest单元测试GoogleC++单元测试框架(简称Gtest),可在多个平台上使用(包括Linux,MacOSX,Windows,Cygwin和Symbian),它提供了丰富的断言、致命和非致命失败判断,能进行值参数化测试、类型参数化测试、“死亡测试”。1断言一般的,要测试一个方法(函数)是否是正常执行的,可以提供一些输入数据,在调用这个方法(函数)后,得到输出数据,然后检查输出的数据是否与我们期望的结果是一致的,若一致,则说明这个方法的逻辑是正确的,否则,就有问题。在对输出结果进行检查(chec.

  • sqlplus中实现上、下键翻动命令

    sqlplus中实现上、下键翻动命令

  • elk查询语法_elk配置

    elk查询语法_elk配置记录了ElasticSearch、Logstash和Kibana的简单安装方法和ES的常用查询操作命令,Logstash还未整理,去官网查比较全。ElasticSearch安装#下载安装包wgethttps://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-7.2.1-linux-x86_64.tar.gz#解压修改文件夹名tar-zxvfelasticsearch-7.2.1-linux-x86_

    2022年10月30日
  • sort函数对vector排序_sort函数对结构体数组排序

    sort函数对vector排序_sort函数对结构体数组排序一、遇到问题:今天写代码的是遇到想对vector进行排序的问题,隐约记得std::sort函数是可以对vector进行排序的,但是这次需要排序的vector中压的是自己定义的结构体(元素大于等于2),想以其中某一个元素进行正序或逆序排序,则不能直接使用sort函数。二、解决方案:在网上找资料的过程中,看到http://blog.csdn.net/aguisy/article/d

  • MySQL 数据库基础知识(系统化一篇入门)[通俗易懂]

    MySQL 数据库基础知识(系统化一篇入门)[通俗易懂]一、数据库简述1.1、数据库概述数据库:DB(DataBase)概念:数据仓库,软件,安装在操作系统之上作用:存储数据,管理数据1.2、数据库分类关系型数据库:SQL(StructuredQueryLanguage)MySQL、Oracle、SqlServer、DB2、SQLlite通过表和表之间,行和列之间的关系进行数据的存储通过外键关联来建立表与表之间的关系非关系型数据库:NoSQL(NotOnlySQL)Redis、…

  • 内网渗透神器_内网渗透什么意思

    内网渗透神器_内网渗透什么意思内网渗透-常用工具免杀Mimikatz免杀Mimikatz其实并不只有抓取口令这个功能,它还能够创建票证、票证传递、hash传递、甚至伪造域管理凭证令牌等诸多功能。由于mimikatz的使用说明网上资料很多,这里就不多加介绍了,随着这两年hw行动越来越多,企事业单位也都开始注重内网安全,有预算的会上全套的终端安全、企业版杀软或者EDR,就算没有预算的也会装个360全家桶或者主机卫士之类的,这也导致很多时候你的mimikatz可能都没法拷贝过去或者没有加载执行,拿了台服务器却横向移不动就尴尬了。因为这款工

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号