html图片分开,webpack单独分离打包css,css里引用的图片路径错误,怎么解决?

现在我的这个项目是将css和js单独打包出来,打包后的目录结构和打包前一致。

打包前:

bV7faN?w=259&h=527

从这张图可以看到,如果是css文件夹根目录下的css文件引用images文件夹下的图片应该使用../就可以了,如果是css下某一个文件夹下面的css引用图片的话,就要往上层目录跳两层../../

打包后:

bV7fdx?w=291&h=681

webpack.config.js

var webpack = require('webpack');

var glob = require('globby')

var utils = require('utils');

var htmlWebpackPlugin = require('html-webpack-plugin');

var nodeExternals = require('webpack-node-externals');

var CompressionPlugin = require("compression-webpack-plugin");

var ExtractTextPlugin = require('extract-text-webpack-plugin');

var CSS_PATH = {

css: {

pattern: ['./public/css/**/*.css' ,'!./public/css/index.css'],

src: path.join(__dirname, './public/css/'),

dst: path.resolve(__dirname, 'build/public/css/'),

}

}

function getCSSEntries(config) {

var fileList = glob.sync(config.pattern)

console.log(fileList)

return fileList.reduce(function (previous, current) {

var filePath = path.parse(path.relative(config.src, current))

var withoutSuffix = path.join(filePath.dir, filePath.name)

previous[withoutSuffix] = path.resolve(__dirname, current)

return previous

}, {})

}

module.exports = [

{

target:'web',

externals: [nodeExternals()],

devtool: 'cheap-module-eval-source-map',

context: path.resolve(__dirname),

entry: getCSSEntries(CSS_PATH.css),

output: {

path: CSS_PATH.css.dst,

filename: '[name].css'

},

module: {

rules: [

{

test: /\.css$/,

use: ExtractTextPlugin.extract({

use: "css-loader",

publicPath:'../'

})

},

{

test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,

use: 'url-loader?limit=20000&name=[name].[ext]',

},

{

test: /\.scss$/,

loaders: ["style", "css", "sass"]

},

]

},

resolve: {

extensions: ['.css']

},

plugins: [

new ExtractTextPlugin('[name].css'),

]

},

]

结果

打包完成后启动项目,本来那些css根目录下的css引用的图片路径有一部分错误了。

css根目录下的css文件图片路径

bV7fc6?w=514&h=148

请问各位大神,这个问题用什么办法可以解决?可以把对应的图片打包到对应的文件夹下吗?我是一个webpack菜鸟,配置有点杂乱,望各位大神见谅!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/301500.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

每日一笑 | 程序员千万不能轻易去网吧!

全世界只有3.14 % 的人关注了数据与算法之美(图片来源于网络,侵权删)

.Net Core with 微服务 - Consul 注册中心

上一次我们介绍了 Ocelot 网关的基本用法。这次我们开始介绍服务注册发现组件 Consul 的简单使用方法。服务注册发现首先先让我们回顾下服务注册发现的概念。在实施微服务之后,我们的调用都变成了服务间的调用。服务间调用需要知道IP、端口等信息。再没有微服务之前…

指定特定的内容为首页

2019独角兽企业重金招聘Python工程师标准>>> 默认的情况下:drupal7是将新发表的文件都显示在首页中。 通过下面的方法,指定特定的内容为首页: 管理--》配置--》系统--》站点信息--》默认首页,将相应的内容地址写入&a…

Python到底是有什么魅力,让程序猿为它折腰?

在大数据时代,信息更新非常快速,计算机语言也犹如雨后春笋般被我们所熟知。C语言、C、Java等可谓是各领风骚、独占鳌头,而Python则是一门近几年崛起很快也很火的编程语言。虽说编程语言难分好坏,各有千秋。但Python到底有什么魔力…

jenkins代理设置

2019独角兽企业重金招聘Python工程师标准>>> 抱怨:对于像我这样苦逼的用户,机器在内网,干啥都要“偷偷”通过代理。 言归正传,jenkins\hudson默认并没有提供proxy设置,nexus仓库倒是提供里proxy设置。jenk…

.NET 6 Preview5+VS2022实战千万并发秒杀项目,帅爆了(附源码)

Microsoft 宣布了Visual Studio 2022 的第一个预览版,并且同时也发布了.NET 6 Preview 5。具有里程碑意义的Visual Studio 2022 Preview 1正式发布,重点是64位,而没有增加新功能,并且同时也发布了.NET 6 Preview 5。下面的内容来自…

你们要的印度布线,这是一种极端的牛X

全世界只有3.14 % 的人关注了数据与算法之美前天,数据汪分享了一篇文章「德国布线牛到不行?今天带你看看中国的!」,一个中国的布线,小伙伴们表示非常过瘾,强迫症的最爱。不过数据汪也收到不少粉丝留言说&am…

MIPS衰落 LoongArch崛起

不久前,龙芯发布了自主指令集LoongArch和基于LoongArch设计的3A5000,与MIPS彻底分道扬镳。从龙芯最初基于MIPS添加指令,到发展出基于MIPS的LoongISA,再到最新的LoongArch,龙芯的目的是非常明确的,也是显而易…

html答题赚钱源码,WTS在线答题系统 v1.0.0

WTS在线答题系统为在线答题系统(在线考试),支持在线考试、在线练习等功能... 支持题型:单选题、多选题、填空题、问答题、判断题、附件题、材料题、视频题、音频题支持答题类型:手工配置 试卷答题、随机抽题练习社交功能:试题收藏…

连锁反应装置积木好玩到尖叫!

▲数据汪特别推荐点击上图进入玩酷屋小木用真金白银来给大家送礼物啦,特别感谢这些年一直以来大家对我们的支持,才让我们越做越好。(点我参与送礼活动)之前推荐的“小小机械师”成了孩子最受欢迎的玩具,玩了的孩子几乎…

chrome vue.js插件文档_神级宝库!GitHub 标星 1.2w+,Chrome 最天秀的插件都在这里啦!...

文章来源:Python空间作者:Rocky0429作为一个在远古时代用过什么 IE、360、猎豹等浏览器的资深器哥,当我第一次了解 Chrome 的时候,就被它的美貌给吸引住了...就在我用了一段时间之后,我坚决的卸载了电脑上其它碍眼的浏…

Android实现通用的ActivityGroup(效果类似Android微博客户端主界面),...

为什么80%的码农都做不了架构师?>>> 可以说ActivityGroup是Google提供的一个非常优秀的API,但它需要做稍微复杂的重写才能用起来比较方便,本文拟将实现这个稍微复杂的重写。TabActivity作为ActivityGroup唯一的子类却让人大失所望…

类选项html 最后无距离,各种距离 一览无遗

offsetLeft,Left,clientLeft的区别假设 obj 为某个 HTML 控件obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置,整型,单位像素。obj.offsetLeft 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置&a…

华为起诉最新进展,国内航司暂停运行有关客机,收买家庭不得继续抚养被解救儿童,脸书创始人后悔没早学微信,这就是今天的大新闻...

今天是3月11日农历二月初五今天星期一没带耳机线感觉这样用手机是没有灵魂的下面是今天的大新闻华为起诉最新进展(环球网)多个来自美国的消息证实,美国的联邦法院已经就华为公司起诉美国政府一案给美国政府及其多位部长发去了法院传票。上图&…

前目的地罗伯森是谁_距离目的地只剩10公里,开车师傅却在高速公路上睡着了...

钱江晚报小时新闻记者 吴崇远 通讯员 俞斐“我从杭州过来,刚才开累了,就休息了几分钟……”“杭州到嘉善那么一点路都犯困了?”4月6日凌晨4点30分,高速交警嘉兴支队值班民警在巡逻时发现,一辆厢式小货车开着双跳灯&…

WPF 写一个提醒工具软件(完整项目)

昨天整理硬盘时,偶然发现一个很久之前写的小工具,一个提醒工具。包含定时提醒,间隔提醒功能。看看效果:界面看起来也还凑合,还使用了HandyControl,有桌面托盘功能界面是下面这样的提醒窗口有两种&#xff0…

她只用1个方法,就把英语拿下了!

全世界只有3.14 % 的人关注了数据与算法之美这3招让你未来6个月讲一口流利英语怎么摆脱单词记不住?如何解决听不懂老外讲英语?让老外叹服你口语的唯一方法……请看中国著名口语教学专家写给你的一封信:亲爱的朋友:你好&#xff01…

英语计算机工程师求职信,计算机工程师英文求职信范文

计算机工程师英文求职信范文是由个人简历模板网为你提供的一份个人求职信范文,可直接使用或根据实际情况进行修改。祝您职场顺利,早日找到称心如意的工作!Dear Sir or Madam,I am writing to apply for a position as a computer engineer in…

WPF实现环(圆)形菜单

WPF开发者QQ群: 340500857 | 微信群 -> 进入公众号主页 加入组织“ 前言,接着上一篇圆形菜单。”欢迎转发、分享、点赞、在看,谢谢~。 01—效果预览效果预览(更多效果请下载源码体验):02—代码如下一、…

win7系统桌面计算机怎么打的开,windows7系统双击计算机打不开怎么解决|win7双击计算机打不开的解决方法...

运行windows7系统的时候双击"计算机"遇到打不开的情况,也不知道怎么回事,尝试用杀毒软件解决也无效。如果要查看磁盘的具体情况,都没办法查看了。针对win7双击"计算机"打不开的问题,下面小编介绍两种解决方法…