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

最新推荐文章于 2023-11-22 10:03:52 发布
原创 最新推荐文章于 2023-11-22 10:03:52 发布 · 2.1k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#webpack #scss #打包 #img src

在webpack小项目中，遇到了html img src引用和css资源打包的挑战。问题包括：图片路径错误和css打包时资源引入出错。降低file-loader版本至4.1.0解决了html中img src的问题。而对于css，发现url-loader的limit设置不当导致图片路径错误。最终通过在解析css或scss时设定路径解决了问题。建议遇到类似问题时深入理解官方文档。

最近在做一个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目录下，而大于该值的会打包到设置的路径下， 我这里是按照原路径输出的。在这里插入图片描述
所以这是一种情况导致出错的原因，但是因为引入图片时咱们也不能考虑图片大小而进行不同的引入（使用CSS引入还是html引入），所以设置limit是不太行的。
于是便继续查找问题的真正根源在于图片打包后的路径

最低0.47元/天 解锁文章
精选资源
纯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文件...
webpack打包HTML文件
m0_52434369的博客
07-06 1345
在这里我们应该注意一下，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 255
如有一个显示百度地图的页面，源码如下：如何把此页面作为一个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 858
语法规范,但是在进行使用配置webpack.congfig.js进行导出暴漏的时候,使用的却是。出现这个问题的原因主要是因为在package.json中进行定义使用的语法规范是。既用module.exports进行导出,所以会出现这个问题.因为我写的js文件使用的是ES6的语法规范,所以把。文件中进行导出的模式,改成了默认进行导出。,进行导出,问题就解决了,总之要进行保证。设置和使用的语法规范要是相同的.
webpack打包html -1
zhoulucky1993的博客
12-23 655
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 954
在webpack打包时，npm run build 访问里面的index首页，发现路径不对，有时候是空白页。 解决方法： 在config下面的index.js把 assetsPublicPath: ‘/’, 修改为： assetsPublicPath: ‘./’, ttf .woff .woff2.img路径错误 解决方法： 在build下面的webpack.base.conf.js把...
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
11-30
最近在使用webpack + vue做...二、此时html中的js、css、img引入均没有问题，但是css中的background-image还是报404 此时的问题原因是，使用了相对地址后，在css进行引入的图片路径，其相对的是css文件的路径 此时的
webpack 打包压缩js和css的方法示例
10-18
本文详细介绍了使用Webpack进行JS和CSS文件打包与压缩的方法，并提供了配置示例。Webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler)，在处理前端资源时非常有用。它通过加载器(loaders)和插件...
webpack学习(六) -- webpack自动生成html文件并引入js包
weixin_34121282的博客
04-09 2952
html in webpack 痛点：html是我们前端最最基础的也是最接近视图的部分，上文中说到关于css的部分，我们的案例都是要自己创建html文件，然后把打包后的js和css文件手动引入html中。 这样狠繁琐呀，所以本文就是要学习，怎么用webpack实现通过当前的html文件，自动生成一个html文件并把打包后的css和js文件引入。 痛点 在webpack配置文件中，我们生成的当前文件...
webpack笔记（2）打包src下的html文件
weixin_30602505的博客
07-12 153
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 3093
<! /* 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 765
一.安装 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 1006
在测试的时候我的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 3211
解决方案有三种： 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 打包后 图片名称不一致导致页面上图片404问题
萌新不会永远是萌新的博客
12-18 1743
webpack 打包后 图片名称不一致导致页面上图片404问题 webpack 中使用 html-loader (| html-withimg-loader) 和 html-webpack-plugin时，打包后，image文件夹中图片的名字被转化，但是index.html img src使用的图片名字名字仍然是打包前图片的名字 打包后图片的名字： 打包后html 中引入的名字： 导致页面...
webpack打包html中img标签引入的图片遇到的问题
lscheng的博客
10-18 1995
解决Automatic publicPath is not supported in this browser问题 一、起因 最近在学习webpack之时遇到了这个问题，问题是出现在学习打包html中的img标签之时，根据教程打，教程的loader配置是这样的 { test:/\.(jpg|png|gif)$/, //多个loader时，使用use，一个时可以直接使用loader //下载
webpack打包html中图片不显示
qq_43033251的博客
05-12 884
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优化篇（四十八）：使用 Tree Shaking 擦除无用的 JavaScript 和 CSS
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
08-21 1174
概念：1 个模块可能有多个方法，只要其中的某个方法使用到了，则整个文件都会被打到 bundle 里面去，tree shaking 就是只把用到的方法打入 bundle ，没用到的方法会在 uglify 阶段被擦除掉。然后我们打包，去 dist 目录里找到 search 的 css 文件，可以看到这个类也打包进去了，我格式化了一下 css 文件。添加好之后，运行打包命令，我们可以看到没有使用的类就被清除掉了。我们在 search 的css 里添加一个没用使用的类。使用：webpack 默认支持，在。
手把手教你使用Webpack从零配置打包HTML和JS
Webpack 是目前前端工程化领域中最主流的构建工具之一，它本质上是一个静态模块打包器（module bundler），能够将项目中所有的资源——包括但不限于 JavaScript、CSS、图片、字体、HTML 等——视为模块，并根据依赖...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值