webpack5.0中使用file-loader的问题

最新推荐文章于 2024-05-15 01:52:39 发布
原创 最新推荐文章于 2024-05-15 01:52:39 发布 · 986 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#webpack

本文详细探讨了在webpack5.0环境下，如何处理CSS背景图和JS中引入的图片。通过配置file-loader，解决了CSS背景图片不显示的问题，同时解析了JS中import引入的图片。在webpack配置中，针对CSS和JS中的图片进行了不同规则的设置，最终实现了预期的效果。

1. webpack5.0 中对css图片路径的处理

环境

    "webpack": "^5.70.0",
    "file-loader": "^6.2.0",
    "webpack-cli": "^4.9.2"
1.1 没有任何处理

/* image.css */
.image-bg {
   
   
  background-image: url("../img/WechatIMG2.jpeg");
  width: 300px;
  height: 300px;
}



// createDOM.js
import "../css/image.css";

const bgDivEl = document.createElement("div");
bgDivEl.className = "image-bg";

document.body.append(bgDivEl);

webpack的配置

const path =</
最低0.47元/天 解锁文章
【Webpack5笔记】loader的概念以及手写clean-log-loader、banner-loader、babel-loader和file-loader
qiaoyangla的博客
06-01 442
Loader概念 帮助 webpack 将不同类型的文件转换为 webpack 可识别的模块。 Loader的执行顺序 pre：前置loader normal：普通loader inline：内联loader post：后置loader 执行的优先级：pre>normal>inline>post 相同优先级执行顺序为：从右到左，从下到上 // 此时loader执行顺序：loader3 - loader2 - loader1 module: { rules: [ ..
5.0 Vue中使用webpack
学习交流记录
06-23 1596
5.0 Vue基础使用webpack
webpack5用file-loader图片出错
Voiceu的博客
04-10 1114
webpack5，在css文件里面进行引入图片，不用file-loader是可以显示的，但是加了file-loader反而不行 /* 没有file-loader的时候也能用 */ .img-bg{ background-image: url("../img/眼睛1.jpg"); width: 200px; height: 200px; background-size: contain; } 参考链接 配置里面这样写就行了 { test: /\.jpg$/,
webpack-file-loader
qq_41893334的博客
05-18 2153
1.什么是loader? webpack的本质是一个模块打包工具, 所以webpack默认只能处理JS文件,不能处理其他文件, 因为其他文件中没有模块的概念, 但是在企业开发中我们除了需要对JS进行打包以外, 还有可能需要对图片/CSS等进行打包, 所以为了能够让webpack能够对其它的文件类型进行打包, 在打包之前就必须将其它类型文件转换为webpack能够识别处理的模块, 用于将其它类型文件转换为webpack能够识别处理模块的工具我们就称之为loader 2.如何使用loader webpack中的
前端学习案例4-webpack中使用file-loader
qq_41632427的博客
12-09 264
前端
webpack5 基础配置（2） postcss使用 file-loader
lin_fightin的博客
03-22 3894
第一小节讲了browserslist的作用,接下里讲Postcss 这个插件有什么用呢？ 1 可以通过js来转换css样式如适配，加前缀，css的重置等等 2 postcss本身功能很少，需要借助其他插件。 如何使用呢？ 1 查找postcss工具的扩展，比如webpack的postcss-loader， 2 安装对应功能的postcss插件。 先来看基本使用 原生postcss插件需要借助postcss-cli使我们能在命令行控制 cnpm install postcss -D cnpm install
webpack配置uglifyjs-webpack-plugin压缩
热门推荐
weixin_44090040的博客
07-24 1万+
安装代码压缩插件 npm install uglifyjs-webpack-plugin --save-dev 在webpack.base.conf.js中配置 /* * @Descripttion: * @version: * @Author: zhangfan * @email: 2207044692@qq.com * @Date: 2020-05-18 13:46:43 * @LastEditors: zhangfan * @LastEditTime: 2020-07-24.
webpack5.0中打包css背景图片生成重复，不能显示的问题考究
Coralpapy的博客
08-05 1721
问题：利用webpack5.0以上版本进行背景图片打包，会出现打包图片重复的问题，并且在背景图片无法正常显示. 测试过的正常配置如下： webpack.config.js const { resolve } = require('path') module.exports = { mode: 'development', entry: './src/index.js', output: { path: resolve(__dirname, 'dist'),
svgsprite的svg-sprite-loader在vue中的使用及vue-cli如何配置
qq_35385241的博客
04-23 893
根据本人在项目的实践提炼出来，在说svg-sprite-loader使用之前，我们先看一下具体效果: 目录结构 把svg图放置在assets/icons/svg下， /assets/icons/index.js 注入全局组件 import Vue from 'vue' import SvgIcon from '@/components/SvgIcon' Vue.component('svg-icon', SvgIcon) const req = require.context('./svg',
详细介绍Webpack5中的Loader
zag666的博客
07-27 1285
用来清理 js 代码中的console.log// 将console.log替换为空 return content . replace(/ console\.log\(.*\);?/ g , "");
详解Webpack loader 之 file-loader
10-17
主要介绍了详解Webpack loader 之 file-loader，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Webpack（5）loader
悦涵仙子的技术笔记本
08-23 784
loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。 本质上，webpack loader 将所有类型的文件，转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块。 示例 例如，你可以使用 loader 告诉 webpack 加载 CSS 文件，或者将 TypeScript 转
Webpack5实战笔记----10.file-loader处理图片
weixin_62273462的博客
11-02 624
问题： 新建img文件夹放入图片资源。 在js文件夹里新建image.js,内容如下： function packImg() { //创建一个容器 const oe = document.createElement('div') //创建img标签，设置src属性 const oImg = document.createElement('img') //加default是为了兼容webpack5 oImg.src = require('../i
Webpack:Loader学习——功能loader,file-loader（将内容原封不动输出（主要有图片 图标））
weixin_47295886的博客
04-03 741
分成3步骤（根据文件内容生成带hash值文件名、 将文件输出出去、 返回：module.exports = "文件路径（文件名）"）但是此时输出6张图片（3张自己输出 3张webpack输出 原因 webpack默认处理图片资源）（需要处理图片、字体等文件。阻止webpack默认处理图片资源，只使用file-loader处理。处理的内容：文件路径+将文件名改成hash值，然后路径表达式。——使用开发模式配置 不要使用devserve模式。引入+第一步（查看文件名生成的效果）运行（辉报错 但是显示了）
webpack5以上安装file-loader，url-loader 解决图片路径解析问题
zjj2914257436的博客
12-07 926
webpack5以上安装file-loader，url-loader 解决图片路径解析问题 webopack 5 直接配置默认资源处理器即可 type: ‘asset/resource’ webpack5之前只能使用 loader处理 { test: /.(jpg|png|jpeg|gif|svg)$/i, // type: ‘asset/resource’ use: [ { loader: ‘url-loader’, options: { esModule: false, // 处理图片不显示问题 lim
webpack5大常用loader
zk86547462的博客
08-22 703
官网 一，打包图片文件 1file-loader npm install --save-dev file-loader 默认情况下，生成的文件的文件名就是文件内容的 MD5 哈希值并会保留所引用资源的原始扩展名。 import img from './file.png' webpack.config.js module.exports = { module: { rules: [ { test: /\.(png|jpg|gif|jpeg|png|svg)$/, u
webpack5基本教程-2
weixin_43484007的博客
10-11 513
生产模式是开发完成代码后，我们需要得到代码将来部署上线。这个模式下我们主要对代码进行优化，让其运行性能更好。优化代码运行性能优化代码打包速度。
webpack的相关配置，以及使用webpack打包文件时用到的loader以及相关插件的使用
最新发布
2401_84152177的博客
05-15 1170
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
图片和字体图标的加载器：url-loader和file-loader的使用及版本问题总结
m0_51608940的博客
07-30 932
1、问题 在vue项目中，需要使用url-loader和 file-loader加载器对图片和字体图标进行解析，在此过程中们往往会出现诸如以下报错： （1）图片路径被渲染url([object Moudle])，导致图片和字体图标显示不出来 （2）Uncaught Error: Module build failed (from ./node_modules/url-loader/index.js): TypeError [ERR_INVALID_ARG_TYPE]: The “id” argument m
Webpack中使用protofile-loader导入.proto文件的方法
3. protofile-loader：protofile-loader是一个webpack loader，它允许你在webpack构建过程中导入.proto文件。.proto文件是Protocol Buffers（protobuf）的文件，protobuf是Google开发的一种数据描述语言，用于序列化...
评论 4
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值