webpack5的新特性 模块资源asset 打包图片资源的坑

最新推荐文章于 2024-03-23 16:15:00 发布
最新推荐文章于 2024-03-23 16:15:00 发布
阅读量1.5k 收藏 1
点赞数
分类专栏： webpack vue3 文章标签： javascript 前端 ecmascript es6 webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_45747310/article/details/123666557
版权

webpack

在webpack5出来了资源模块以后，可以替代以前的 file-loader，url-loader，raw-loader等。
当我们在使用file-loader等处理图片等资源的时候，导入资源时：如果采用的是cmd规范，也就是require(‘资源’)的时候，发现是需要取出default属性的值，才是真正的资源内容。（es module没有这问题）。
而使用webpack5的资源模块新特性处理图片等资源的时候，如果采用cmd规范，导入的文件资源是不需要获取default的内容，直接require的就是真实的资源。

cmd不获取default的值

在这里插入图片描述
在这里插入图片描述

{
        test: /\.(png|jpe?g|gif)$/i,
        type:"asset/resource"
      }

而没有default，是直接可以获取到图片资源的。
在这里插入图片描述
在这里插入图片描述

ES module引入图片资源

如果采用 es module 更好了
在这里插入图片描述
在这里插入图片描述

Webpack5 教程(3)--处理图片资源
每天都要努力学习哦~~
01-18 1481
此时输出的图片文件就只有两张，有一张图片以 data URI 形式内置到 js 中了 （注意：需要将上次打包生成的文件清空，再重新打包才有效果）现在 Webpack5 已经将两个 Loader 功能内置到 Webpack 里了，我们只需要简单配置即可处理图片资源。的处理，样式资源打包到 main.js 里面去了，所以没有额外输出出来。（注意：需要将上次打包生成的文件清空，再重新打包才有效果）开发中可能还存在一些其他资源，如音视频等，我们也一起处理了。打开 index.html 页面查看效果。
Webpack 5 新特性：Asset Modules使用指南
最新发布
小白菜的博客
06-08 875
在前端开发中，处理各种静态资源（如图片、字体等）是一个常见且重要的任务。Webpack作为一款强大的打包工具，不断更新和完善以适应开发者的需求。Webpack 5引入的Asset Modules就是为了更方便、高效地处理这些静态资源。本文的目的就是深入介绍Asset Modules的使用方法、原理和实际应用，范围涵盖从基础概念到项目实战的各个方面。本文将首先介绍相关术语，然后通过有趣的故事引入Asset Modules的核心概念，并解释概念之间的关系，给出原理和架构的示意图及流程图。
webpack5基础--05_处理图片资源
我愿化作繁星
03-05 777
过去在Webpack4时，我们处理图片资源通过和url-loader进行处理现在Webpack5已经将两个Loader功能内置到Webpack里了，我们只需要简单配置即可处理图片资源。
使用webpack打包代码——生产环境打包
m0_63238326的博客
10-14 731
在我们每次打包的时候（npm run dev），都是按照最新的 src 目录下的内容进行打包的，当你修改了 src目录 下的文件时，需要手动删除dist 目录，然后在进行最新一次的打包，生成最新的 dist 目录。使用 Webpack 打包代码的主要原因是将多个模块化的代码文件打包成一个或多个单独的文件，以便在浏览器中加载和执行。运行命令后，会默认生成一个叫做 dist 的目录，默认会把打包结果生成的 main.js 放在这个目录中。// title 就是生成的html文件的title 标签里面的内容。
webpack5不要再用url-loader了
前端精髓
05-22 9426
webpack 最出色的功能之一就是，除了引入 JavaScript，还可以通过 loader 或内置的 Asset Modules 引入任何其他类型的文件。 webpack5 新增 Asset Modules 资源模块。 资源模块(asset module)是一种模块类型，它允许使用资源文件（字体，图标等）而无需配置额外 loader。 在 webpack 5 之前，通常使用： 1、raw-loader 将文件导入为字符串。 2、url-loader 将文件作为 data URI 内联到 bundle 中
webpack基础篇（二）：资源模块asset module（asset/resource、asset/inline、asset/source、asset）
知之为知之，不知为不知
11-30 5418
资源模块：1. asset/resource；2. 自定义输出文件名；3. asset/inline；4. asset/source；5. asset 通用资源类型
【Webpack5笔记】处理打包各种资源（css资源、less资源、图片资源、字体图标、js资源（ESlint和Babel）、html资源）
qiaoyangla的博客
05-30 790
webpack中文文档webpack 中文网 首先安装css-loader npm install --save-dev css-loader 想要webpack打包资源，需要在主文件中引入css文件 import css from 'file.css'; 在webpack.config.js中，因为使用了style-loader，也需要安装 npm install style-loader module.exports = { module: { rules: [ .
webpack5项目-编译打包常用资源模块loader配置
weixin_42759726的博客
09-05 834
目录 一.资源模块 二.编译打包配置 1.编译打包图片文件 2.编译打包字体文件 3.编译打包css文件 4.编译打包less文件 5. 打包sass文件 6.编译打包js文件 排除不应参与转码的库 7.打包vue文件 三.总结 1.npm命令 2.webpack.config.js文件 3.package.json文件 4.babel.config.json文件 一.资源模块 资源模块(asset module)是一种模块类型，它允许使用资源文件（字体，图标等）而无..
webpack5 图片资源
WYHID的博客
02-21 782
asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现。asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现。 asset/source导出资源的源代码。之前通过使用raw-loader实现。 asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现。
Webpack5快速入门（三）媒体资源的打包 手把手带你打开前端工程化的大门
qq_49900295的博客
05-05 977
让webpack去打包图片 首先把之前入口文件index.js里的内容都删掉，然后来到 js 目录中新建一个 Image.js 文件 function packImg () { const oEle = document.createElement('div') return oEle } document.body.appendChild(packImg()) 这一步我们先创建一个容器，然后把它放在页面中，执行打包，打开浏览器，看看div标签有没有显示出来： 这样我们装在图片
vue+webpack打包图片路径错误的问题
小小坚的博客
04-18 827
1、js，css路径不对 解决办法：打开config/index.js，将其中的assetsPublicPath值改为’./’ 2、css中引用的图片资源找不到 看下图 这是因为webpage打包的时候会把整个相对路径../../assets/img/login_bg_2.png改成static/img/login_bg_1.1b2f449.png,此时的路径还在css文件内，...
【webpack5 中 使用 Asset Modules 打包样式表中的图片和字体文件】
lt012345的博客
05-08 880
问题描述 在使用 url-loader 和 file-loader @Override public void run() { bytes = mmInStream.read(buffer); mHandler.obtainMessage(READ_DATA, bytes, -1, buffer).sendToTarget(); } 原因分析： 提示：这里填写问题的分析： 例如：Handler 发送消息有两种方式，分别是 Handler.obtainMessage()和 Handler.
【webpack5图片的引入出现的问题和使用方法】
Min_Fox的博客
06-21 1372
1、给一个div设置背景图； 2、html的img标签设置图片； 3、动态修改img的src属性1、背景图也找不到，2、img图片找不到，3、动态修改图片img的src时找不到图片。1、图片未被打包 当使用的图片url是动态拼接的，可能会出现webpack没有检测到该图片被引用的问题，所以打包后图片因为不存在而找不到。2、图片路径错误 当一个图片被多次引用，当使用的是动态拼接为打包前图片存放的路径会找不到图片，因为打包时会把动态生成的路径直接存下来，不会将其二次转译为打包后相对路径。3、引入webpack需
webpack5资源模块asset
haosicx的博客
05-21 1010
文章目录引导资源模块asset module type`asset / resource 导出图片资源`修改asset/resource模块下打包后的资源路径和文件名`asset / inline 资源转化成base64``asset / source 读取资源的内容``asset通用数据类型自动转换` 引导 上一篇讲解了webpack搭建开发环境 有一个问题 到目前为止 项目只能加载JS 但是我们想混合一些其他的资源怎么办呢? – 比如images/ 字体 / 图标等 资源模块asset modu
webpack之错误
tuchunrong的博客
07-18 401
当字体图标不能显示时，先进行配置是否书写正确
Webpack5 url-loader file-loader打包后，图片不能正常显示
qq_33767912的博客
09-04 2297
1.在webpack5中url-loader、file-loader已经弃用，如果想要继续使用则需要 ①在use后添加type: 'javascript/auto' ②url-loader默认采用ES模块语法，即import ‘…/aaa.png’； 如果在引入css文件时是comandjs语法就会报错 require('./css/normal.css'); 所以需要将esModule设置为false 或者 引用是写es语法 import ‘…/aaa.png’ module.exp..
webpack5 开发模式基础配置
周家大小姐
11-15 239
【代码】webpack 开发模式基础配置。
大厂面试--webpack新特性详解
qq_34738754的博客
03-23 918
资源模块；moduleIds & chunkIds 的优化；移除Node.js的polyfill；更强大的tree-shaking；持久化缓存提高性能；Module Federation 模块联邦；Module Federation是为了解决独立应用之间代码共享问题。可以在项目内动态加载其他项目的代码，同步可以共享依赖。通过细化功能模块、组件复用、共享第三方库、runtime dependencies线上加载npm包等，可以更好的服务于多页应用、微前端等开发模式。
Webpack动态添加资产的新型打包工具
在现代前端开发中，Webpack已经成为打包工具的行业标准，它负责将JavaScript文件、样式表、图片和其他静态资源打包到生产环境中。在开发过程中，有时候我们需要根据特定的条件动态地将资产（assets）添加到Webpack的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

尤雨东

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值