webpack的资源打包(html中引入的资源和css中引入的资源)配置使用问题

最新推荐文章于 2023-11-22 10:03:52 发布
最新推荐文章于 2023-11-22 10:03:52 发布
阅读量2k 收藏 2
点赞数 1
分类专栏： 前端 文章标签： webpack scss 打包 img src
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cyg_l02/article/details/103325127
版权
在webpack小项目中，遇到了html img src引用和css资源打包的挑战。问题包括：图片路径错误和css打包时资源引入出错。降低file-loader版本至4.1.0解决了html中img src的问题。而对于css，发现url-loader的limit设置不当导致图片路径错误。最终通过在解析css或scss时设定路径解决了问题。建议遇到类似问题时深入理解官方文档。
摘要由CSDN通过智能技术生成

最近在做一个webpack小项目的文件打包情况

碰见的问题如下：
1、html中的img的src引入为[‘object, module’]的情况
2、对于css打包文件资源引入出错问题引入路径正确，但是图片的放置地址出错

首先对于问题1情况如下：
在这里插入图片描述
图片地址打包是正确的情况
在这里插入图片描述
这个问题的出现原因是因为file-loader的版本太高，我目前开发时最高版本5.1，于是我将file-loader的版本降为4.1.0后问题解决。
在这里插入图片描述

针对问题2这种情况我也找了很多解决方法。

首先找到问题在于html打包时和CSS打包时都是走的url-loader进行打包的而其中设置的额limit限制会将小于该值的打包进CSS目录下，而大于该值的会打包到设置的路径下， 我这里是按照原路径输出的。在这里插入图片描述
所以这是一种情况导致出错的原因，但是因为引入图片时咱

最低0.47元/天 解锁文章
Talljack
关注
专栏目录
webpack5笔记 (二) ---css资源打包
pana hema的博客
06-16 359
webpack5 ---关于css资源的打包
webpack打包HTML文件
m0_52434369的博客
07-06 1259
在这里我们应该注意一下，webpack对html和对css,img的打包方式是不一样的喔，对html打包是通过插件plugin,对css.img打包时通过loader喔，我们后面会做详细的解释的。今天我们主要来看一看webpack如何对html文件进行打包 首先，既然是通过插件打包，那么我们就应该先安装插件， 1:安装插件：html-webpack-plugin -D 只在开发的时候用 2:在webpack.config.js中引入插件（这个文件是建立在主项目文件夹下面哟） ：const a=require
内嵌资源html,如何嵌入完整的html以及在线资源文件
weixin_39602108的博客
05-30 202
如有一个显示百度地图的页面，源码如下：如何把此页面作为一个slide?body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}添加行政区划// 百度地图API功能var map = new BMap.Map("allmap");map.centerAndZoom(new B...
使用webpack进行打包的时候无法进行打包无法进行打包
m0_74205854的博客
11-22 415
语法规范,但是在进行使用配置webpack.congfig.js进行导出暴漏的时候,使用的却是。出现这个问题的原因主要是因为在package.json中进行定义使用的语法规范是。既用module.exports进行导出,所以会出现这个问题.因为我写的js文件使用的是ES6的语法规范,所以把。文件中进行导出的模式,改成了默认进行导出。,进行导出,问题就解决了,总之要进行保证。设置和使用的语法规范要是相同的.
webpack打包html -1
zhoulucky1993的博客
12-23 579
1：确保自己的电脑已经安装了node和Git软件 2：自己在盘里随便创建一个文件夹一般为英文(也就是你自己的项目名称) 3：在新创建好的文件夹里面右键点击调出git指令窗口在窗口里面输入如下指令：     1：npm install webpack -g                 2:  npm install webpack-cli -g     3: npm init -y ...
webpack打包时，html出现路径问题
Genius_cxx
08-12 847
在webpack打包时，npm run build 访问里面的index首页，发现路径不对，有时候是空白页。 解决方法： 在config下面的index.js把 assetsPublicPath: ‘/’, 修改为： assetsPublicPath: ‘./’, ttf .woff .woff2.img路径错误 解决方法： 在build下面的webpack.base.conf.js把...
纯html+javascript+css webpack打包的项目
最新发布
04-12
**纯HTML+JavaScript+CSS Webpack打包项目** 在现代Web开发中，为了提高开发效率和优化网站性能，开发者经常使用Webpack这一强大的模块打包工具。本项目以HTML、JavaScript和CSS为基础，结合Webpack进行资源的管理...
Webpack中css-loader和less-loader的使用教程
12-03
本文将详细介绍如何在Webpack配置中使用`css-loader`和`less-loader`。 ### 一、css-loader `css-loader`的主要功能是解析CSS文件，使其能够在JavaScript中被导入。通过`require`或`import`语句，你可以将CSS文件...
vue-cli与webpack处理静态资源的方法及webpack打包的坑
08-27
当你在Vue组件的模板或CSS中使用这些资源时，Webpack会通过`url-loader`和`file-loader`将它们转换为模块依赖，并根据Webpack的输出配置生成相应的URL。这样做的好处是，资源可以被内联、复制或重命名，适应不同的...
webpack 打包压缩js和css的方法示例
10-18
本文详细介绍了使用Webpack进行JS和CSS文件打包与压缩的方法，并提供了配置示例。Webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler)，在处理前端资源时非常有用。它通过加载器(loaders)和插件...
webpack学习(六) -- webpack自动生成html文件并引入js包
weixin_34121282的博客
04-09 2886
html in webpack 痛点：html是我们前端最最基础的也是最接近视图的部分，上文中说到关于css的部分，我们的案例都是要自己创建html文件，然后把打包后的js和css文件手动引入html中。 这样狠繁琐呀，所以本文就是要学习，怎么用webpack实现通过当前的html文件，自动生成一个html文件并把打包后的css和js文件引入。 痛点 在webpack配置文件中，我们生成的当前文件...
webpack笔记（2）打包src下的html文件
weixin_30602505的博客
07-12 121
npm安装: //安装依赖 npm install --save-dev html-webpack-plugin; webpack.config.js中配置 const htmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { plugins:[ new ...
CSS文件中涉及URL路径的设定
宁以至远
03-23 3026
<! /* Style Definitions */ table.MsoNormalTable {mso-style-name:普通表格; mso-tstyle-rowband-size:0; mso-tstyle-colband-size:0; mso-style-noshow:yes; mso-style-priority:99; mso-style-qf
webpack基础四：html的自动引入打包输出的模块：html-webpack-plugin的使用
a13085759937的博客
05-08 688
一.安装 npm install html-webpack-plugin -D 二.配置 const path = require("path"); const htmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { devtool: 'inline-source-map', // 快速找到代码报错的文件和行数（帮助我们bug定位） mode: 'development', // develpm
webpack5打包html中的img图片不显示
qq_45094682的博客
06-11 907
在测试的时候我的html标签上的img不显示，打包也正常的，结果需要配置esModule:false 去查文档发现webpack5要配置 esModule:false webpack5需要html-loader配置 esModule:false ps：前提是你已经下载了html-loader module:{ rules:[ //...... { test:/\.(png|jpg|jpeg|gif)$/,
关于Webpack 静态Html中 图片打包的问题
KevinMiGuan的博客
08-28 3142
解决方案有三种： 1.通过import方式引入图片； 例：import imgUrl from 'path/to/..png'; 2.通过CommonJS方式引入； var imgUrl = requrie('path/to/..png'); 3.通过html-loader插件方式来解决； 步骤：一、npm install -d html-loader;            二、把...
webpack打包html中图片不显示
qq_43033251的博客
05-12 819
1.首先看下自己的webpack版本，webpack5以上需要用html-withimg-loader 打包html中的图片 /** * 开发环境配置，代码可以运行就可以 */ const {resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/js/index.js', // 打包后所有的输出都在
webpack 打包后 图片名称不一致导致页面上图片404问题
萌新不会永远是萌新的博客
12-18 1622
webpack 打包后 图片名称不一致导致页面上图片404问题 webpack 中使用 html-loader (| html-withimg-loader) 和 html-webpack-plugin时，打包后，image文件夹中图片的名字被转化，但是index.html img src使用的图片名字名字仍然是打包前图片的名字 打包后图片的名字： 打包后html 中引入的名字： 导致页面...
Webpack中文实战指南：模块管理与资源打包
该指南深入浅出地讲解了Webpack的核心概念，包括模块系统、重复轮子（即避免重复使用已有的解决方案）、安装与配置方法、Loader的作用以及如何处理不同类型的资源如CommonJS、AMD、ES6模块、CSS、图片等。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值