图片处理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 中。

webpack(6)webpack处理图片的更多相关文章

  1. webpack入门——webpack的安装与使用

    一.简介 1.什么是webpack webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. ...

  2. webpack基础+webpack配置文件常用配置项介绍+webpack-dev-server

    一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很 ...

  3. 安装webpack和webpack打包(此文转自Henery)

    Henery博客地址为:http://blog.csdn.net/henery_002 写的很详细,可以做参考 最近要做项目优化了,尤其是前端这块,许多js需要模块化管理和相应的优化 1.输入如下地址 ...

  4. Webpack学习-Webpack初识

    一.前言 webpack 到底是个什么东西呢,看了一大堆的文档,没一个能看懂的,因为上来就是给个module.exports 然后列一大堆配置,这个干啥,那个干啥,没一点用.但凡要用一个东西,一个东西 ...

  5. 优雅哥学 Webpack - 01 - Webpack 5 快速体验

    程序员优雅哥简介:十年程序员,呆过央企外企私企,做过前端后端架构.分享vue.Java等前后端技术和架构 本文摘要:主要讲解 webpack 5 初体验.从webpack 5 初识到便写代码.优雅哥将 ...

  6. [AngularJS + Webpack] Using Webpack for angularjs

    1. Install webpack & angular: npm install webpack angular 2. Create webpack.config.js file: modu ...

  7. webpackt入门1:webpack介绍&webpack安装&使用webpack打包

    本篇博客不是原创,简书的zhangwang写的,原文太长,我这里只是提取了一部分. 原文地址:入门webpack,看这篇就够了 一.Webpack解决了什么问题 问题1.JavaScript这个脚本化 ...

  8. 关于webpack 以及 webpack配置和常用插件的学习记录 (2) ------ devServer

    DevServer: devserver会启动一个http服务器用于服务网页请求,接收webpack发出的文件变化的信号.通过websocket协议自动刷新网页,实现实时预览. 安装: npm i w ...

  9. 关于webpack 以及 webpack配置和常用插件的学习记录 (1)

    主要概念: Entry :   webpack的入口,构建的第一步从entry开始. Output :   输出,经过webpack处理后的得到最终想要的代码. Loader :   模块转换工具,把 ...

  10. [Webpack] Access Webpack Dev Server from Mobile Safari on an iPhone

    Testing your sites on mobile devices is a critical part of the development process. Webpack dev serv ...

随机推荐

  1. Lua的string库函数列表

    基本函数 函数 描述 示例 结果 len 计算字符串长度 string.len("abcd") 4 rep 返回字符串s的n个拷贝 string.rep("abcd&qu ...

  2. Linux Socket编程-(转自吴秦(Tyler))

    "一切皆Socket!" 话虽些许夸张,但是事实也是,现在的网络编程几乎都是用的socket. --有感于实际编程和开源项目研究. 我们深谙信息交流的价值,那网络中进程之间如何通信 ...

  3. 看完这篇还不懂 MySQL 主从复制,可以回家躺平了~

    大家好,我是小羽. 我们在平时工作中,使用最多的数据库就是 MySQL 了,随着业务的增加,如果单单靠一台服务器的话,负载过重,就容易造成宕机. 这样我们保存在 MySQL 数据库的数据就会丢失,那么 ...

  4. unity 2017 卡在 loading界面

    看了网上很多方法,都不奏效. 提供一个简单的方法,不妨一试! 打开其他版本unity,登陆你的账户,再打开unity2017即可!

  5. DDD兴起的原因以及与微服务的关系

    DDD为什么能火起来? 我们先不讨论DDD的定义, 先梳理一下DDD火起来的背景, 根据我学习的套路, 永远是为什么为先,再是解决什么问题,是什么东西, 最后如何使用.我们都知道这些年随着设备以及技术 ...

  6. 2021.5.23 noip模拟2(排序|划艇|放棋子)

    今天比昨天更惨,惨炸了 看到T1不会,跳!!! T2不会,再跳!!!! T3不会,后面没题了:::: 无奈无奈,重新看T1,然鹅时间已经过去了一个小时 然而我一想不出题来就抱着水瓶子喝水,然后跑厕所, ...

  7. 自动驾驶QNX,Linux,Autosar概述

    自动驾驶QNX,Linux,Autosar概述 QNX是一个分布式.嵌入式.可规模扩展的实时操作系统.遵循POSIX.1 (程序接口)和POSIX.2 (Shell和工具).部分遵循POSIX.1b( ...

  8. Timer定时器开发

    Timer定时器开发 定时器的作用是不占线程的等待一个确定时间,同样通过callback来通知定时器到期. 参考:https://github.com/sogou/workflow 定时器的创建 同样 ...

  9. python+selenium基础篇,句柄操作(多个页面切换)

    1.我们打开网页有时候会开出多个页面,导致我们常常定位不到我们需要的元素,这种情况可能就是句柄的因素,如下图所示: 2.句柄切换代码如下: from selenium import webdriver ...

  10. 正则表达式re模块的基础及简单应用

    一.re的简介 re模块是python独有的匹配字符串的模块 该模块中的很多功能是基于正则表达式实现 二.正则表达式的基础语法 元字符 匹配内容说明 . 匹配除换行符以外的任意字符 \w 匹配字母或数 ...