Webpack打包css中图片路径问题

最新推荐文章于 2022-07-13 15:47:54 发布
最新推荐文章于 2022-07-13 15:47:54 发布
阅读量3.3k 收藏
点赞数
文章标签： 环境 配置 方法 file entry
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_24172179/article/details/80133150
版权

在入口处entry配置publicpath:”./”
同时一般css是单独打包，用到插件extract-text-webpack-plugin 其中有也有一个publicpath 可以重写原来的pp地址（具体可以看文档） 这里配置为相对路径../这里根据实际情况来判断，以上配置结束打包以后可以以本地file://的方式打开，产品环境可以将entry中的pp地址改成cdn服务器地址，这样就不用配置css打包插件里面的publicpath了
还有一只本地环境解决css中图片问题的方法，就是将entry中的pp地址改成绝对路径__dirname 此处会出现一个问题，反斜杠问题，通过正则表达式将所有的斜杠替换为/，在将他放入pp地址
Pp地址为publicpath

Chenlie33
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决webpack打包css背景图片路径问题
QQQ777jokero的博客
12-09 428
解决webpack打包css背景图片路径问题 webpack.config.js文件 const path = require('path') const htmlWebpackPlugin = require('html-webpack-plugin') // 导入每次删除文件夹的插件 const { CleanWebpackPlugin } = require('clean-webpack-plugin') // 导入抽取css的插件 const MiniCssExtractPlugi
img打 webpack_Webpack打包图片路径问题
weixin_39770311的博客
12-20 436
Webpack使用file-loader处理图片在页面中引入图片有两种方式img标签引入css引入file-loader配置{test: /\.jpg|\.png|\.jpeg|\.svg|\.ttf|\.woff$/,use: [{loader: 'file-loader',options: {name: '[name].[ext]',outputPath: './img',publicPath...
解决webpack5打包CSS图片路径不正确问题
火星基地
03-25 3912
问题 最近在重构博客时，遇到了一个问题。在生产模式下，使用的MiniCssExtractPlugin.loader代替style-loader，但图片、字体等资源文件输出路径设置不正确，webpack 配置如下： module.exports = merge(common, { target: 'browserslist', mode: 'production', devtool: false, output: { path: path.resolve(ROOT_PATH, './b
透过现象看webpack处理css文件中图片路径转换的具体过程
Addisoni
02-06 1094
webpack是目前使用比较流行的一个前端模块打包器，前端的任何资源都被当成一个模块来处理，如图片、css文件等等。在基于webpack构建的前端项目中，一般都会配置有关css文件处理的规则，这其中也包括css文件中图片资源的处理，那么webpack到底是怎么处理它的呢？笔者之前也遇到过类似图片路劲的问题，为此还写过一篇博文webpack生成的css文件background-image url图片...
webpack基础篇（三）：管理资源（image、css、fonts、csv、json5）
知之为知之，不知为不知
11-30 989
管理资源：1. 处理资源 - loader；1.1 加载css - css-loader；1.2 处理less - less-loader；2. 加载css；2.1 抽离css；2.2 压缩css；3.压缩 js；4. 加载images图像；5. 加载 fonts 字体；6. 加载数据；6.1 自定义 JSON 模块 parser
webpack打包css，img，html文件
我的博客简介
07-13 1170
bundle是由webpack打包出来的文件chunk是指webpack在进行模块依赖分析的时候，代码分割出来的代码块module是开发中的单个模块浏览器在用户访问页面的时候，为了加快加载速度，会对用户访问的静态资源进行存储，但是每一次代码升级或者更新，都需要浏览器去下载新的代码，最方便和最简单的更新方式就是引入新的文件名称。什么是Tree-shakingTreeShaking是一个术语，在计算机中表示消除死代码（dead_code）指打包中去除那些引入了但在代码中没用到的死代码。.............
webpack打包css image,webpack 打包CSS 引入图片
weixin_34169322的博客
08-04 263
加载css安装style-loader， css-loadernpm install style-loader css-loader --save-dev配置webpack.config.js文件```module: {rules: [{test: /.css$/,use: [ 'style-loader', 'css-loader' ]}]}```引入css到 js 中，然后在html引用该 j...
完美解决webpack打包css背景图片路径问题
11-20
在webpack中css-loader的解析配置如下 { test: /\.(css|less)$/, exclude: path.resolve(__dirname, 'node_modules'), use: ['style-loader', 'css-loader', 'less-loader'] } 打包后在dist目录的发现没有css...
webpack配置打包后图片路径出错的解决
08-27
在使用Webpack进行项目打包时，常见的一个问题是图片路径出错的问题。这个问题的出现是因为Webpack在打包时会对图片进行处理，导致图片的路径出错。本文将介绍两种解决该问题的方法。 问题描述 在开发环境下，项目...
浅谈webpack打包过程中因为图片的路径导致的问题
08-28
在使用webpack打包时，我们可能会遇到图片路径的问题。例如，在CSS中使用相对路径来充当背景图片，但是在浏览器上运行时却报错，无法找到图片文件。 2. 问题分析 问题的根源在于webpack的打包过程中，图片文件的...
webpack踩坑之路图片的路径与打包
08-29
Webpack 图片路径与打包 在 Webpack 中，图片的路径与打包是一个常见的问题，尤其是在初学者刚开始使用 Webpack 时。图片的引用方式有多种，包括 HTML 文件中的 img 标签、CSS 文件中的背景图设置、JavaScript 文件...
解决vue-cli项目webpack打包后iconfont文件路径的问题
10-18
在本案例中，可以在适当的位置添加`../../`作为公共路径前缀，这样在打包`iconfont`字体文件路径时，Webpack会自动加上这个公共路径，确保CSS文件中的路径指向正确。 例如，你可能需要修改`build/utils.js`中的CSS ...
当css文件中有图片时如何用webpack打包引用
weixin_55803498的博客
05-15 338
**步骤一：**安装url-loader并在webpack.config.js文件中填好相关配置 **步骤二：**安装file-loader **步骤三：**进行打包后会发现在dist(存放打包后文件的文件夹)下出现一张图片，而后在webpack.config.js文件中写入如下配置 **步骤四：**再次打包运行即可 ...
html图片路径报错,如何解决webpack打包后直接访问页面图片路径错误
weixin_36255898的博客
06-05 695
这篇文章主要给大家介绍了在webpack打包后直接访问页面图片路径错误的解决方法，文中介绍的非常详细，对遇到这个问题的朋友们具有一定的参考学习价值，需要的朋友们下面来一起看看吧。前言本文说的这种图片路径错误是这样的，运行webpack-dev-server，一切正常，没有错误。当webpack之后，直接打开index页面，报错，图片找不到，找不到的原因是路径错误。先看我的项目代码webpack.c...
webpack -- 资源和css中图片引用打包为相对路径的方案
热门推荐
积少成多
07-18 1万+
欢迎访问我的个人博客：http://www.xiaolongwu.cn 前言 最近在用vue-cli+webpack做项目，项目架构搭好了之后，想build之后看看效果，但是build出来的index.html文件中的默认资源引用都是绝对路径，也就是相对于根目录的绝对路径；但是我项目如果部署到线上也不一定是在根目录里呀，所以这种默认相对于根目录的绝对路径肯定是不实用的； 解决方案 ...
webpack4打包css中引用的图片
骑着代码去流浪
07-23 2621
使用file-loader和url-loader npm install --save-dev file-loader url-loader 配置文件： const path = require("path"); const uglifyjs = require('uglifyjs-webpack-plugin'); //压缩js插件 const HtmlWebpackPlugin = ...
webpack打包css image
weixin_45441173的博客
02-25 560
webpack打包css
webpack打包css中背景图路径报错问题
xuxu_qkz的博客
02-27 5191
webpack打包css中背景图路径报错问题 问题描述：明明打包成功，但是部署到后台时，却发现背景图丢失了 这是背景图的路径 这是链接地址路径 这是webpack打包后的图片存储路径 通过查找原因，我们可以在浏览器运行的HTML代码中发现，背景图的路径不正确，因此我们需要在webpack重新设置你的css-loader路径，只需要添加publicPath 公共路径即可。 limit，代
工业企业数字化转型通用方案2两个文档.pptx
最新发布
07-05
工业企业数字化转型通用方案2两个文档.pptx
webpack 打包css背景图片路径处理
05-16
为了解决Webpack打包CSS背景图片路径引用问题，我们可以采取以下几种方式： 1. 直接使用相对路径 我们可以使用相对路径来引用背景图片。比如，如果我们的 CSS 文件和图片文件在同一个目录下，那么可以直接使用相对...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值