html图片分开,webpack单独分离打包css,css里引用的图片路径错误,怎么解决?
现在我的这个项目是将css和js单独打包出来,打包后的目录结构和打包前一致。
打包前:
从这张图可以看到,如果是css文件夹根目录下的css文件引用images文件夹下的图片应该使用../就可以了,如果是css下某一个文件夹下面的css引用图片的话,就要往上层目录跳两层../../
打包后:
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文件图片路径
请问各位大神,这个问题用什么办法可以解决?可以把对应的图片打包到对应的文件夹下吗?我是一个webpack菜鸟,配置有点杂乱,望各位大神见谅!!!
html图片分开,webpack单独分离打包css,css里引用的图片路径错误,怎么解决?相关推荐
- 关于vue项目打包后提示图片文件路径错误的解决方法
vue项目打包后在production模式下提示图片 '404(not found),在dev环境下好好的,打包了就提示这个错误.这是为什么呢,以前第一次使用vue-cli构建项目的的时候只有两个图片 ...
- android图片局部替换,如何动态修改Lottie动画里的部分图片?
动效给的效果是一个头耳朵话筒胳膊都在动的摇摆效果,这个不能传视频,大体图片展示如下 紧靠前端css实现这种动效比较难,因此决定采用Lottie实现. 后面才了解到,产品希望小猴子的脸是孩子的头像图片, ...
- web项目中关于引入JS/css文件, 浏览器console出现 net::ERR_ABORTED错误的解决方法
如图错误: 引入js/css后,控制台出现的错误! 我的错误则是因为在静态文件夹下的原因. 解决:如果要放在webRoot下的静态(static)文件夹下,需要在springMvc的配置文件中添加上注 ...
- css div里引用em字体会变斜体_前端开发中7种必要了解的CSS长度单位
众所周知CSS技术我们虽然很熟悉,在使用的过程却很容易被困住,这让我们在新问题出现的时候变得很不利.随着web继续不断地发展,对于新技术新解决方案的要求也会不断增长.因此,作为网页设计师和前端开发人员 ...
- css div里引用em字体会变斜体_CSS文字加粗斜体[解决代码]
CSS如何给文字加粗,这是小白常见的问题,今天俺跟大家总结分享. 标签解决办法 一般老的浏览器可能会使用类似或来加粗文字用来设置斜体,例如以下代码: 加粗字体 加粗字体 斜体 但是此办法语义化不是很好 ...
- css div里引用em字体会变斜体_DIV+CSS怎么样改字体样式
展开全部 1.先给想要改字体样2113式5261的div加一个class或者id 2.用4102选择器找到中国div(.class或者#id) 2.在1653 DIV+CSS怎么样改权字体样式 .on ...
- flask貌似html文件里只能用flask指定的路径格式,css文件里则可用相对路径
- 打包时出现No matching provisioning profile found错误的解决方法
具体错误信息:Code Sign error: No matching provisioning profiles found: No provisioning profiles with a val ...
- webpack打包js/css/scss/less/styl等(可以打包图片)
Webpack 1. 什么是webpack? 打包,压缩各种静态资源的工具(css,js,图片,图标等) 2.目的 性能优化 减少浏览器向服务端请求的次数 节约服务器的的带宽资源 3.如何使用 介绍 ...
最新文章
- 简单介绍:什么是Python?Python好学吗?
- RabbitMQ工作队列
- row_number() over (partition by....order by...)用法 分组排序
- 关于 SAP 电商云 Spartacus UI 路由 routes 配置的数据源问题
- java写入txt文件 不替换_java非覆盖写入文件及在输出文本中换行
- mysql中如何判断某个字段是纯数字
- php数据表格的重载,layui数据表格实现重载数据表格功能(搜索功能)
- 程序员败给了一个厨子,读书无用论让我 必须送书了
- C语言基础入门:C-Free 5下载和安装详细教程
- DELPHI7第三方控件安装
- vertica常用sql语句总结
- 苍井空是如何勾搭上社交电商的? - 案例 - i黑马网
- 消息轰炸(python)
- Scope参数错误或没有Scope权限
- SystemError: Negative size passed to PyUnicode_New
- 利用PyG实现社区检测经典算法ClusterNet
- Unity 碰撞体 composite
- 轨道机动算法的C++实现
- Java抽象类和接口中可以有成员变量吗?
- MySql安装成功后没有my.ini文件怎么办?
热门文章
- ASP.NET Core中使用表达式树创建URL
- .NET Core开发日志——从ASP.NET Core Module到KestrelServer
- Microsoft AI - Custom Vision in C#
- 码农不重视文档:开源项目深受其苦
- [ASP.NET Core] Middleware
- Docker4Dev #6 使用 Windows Container 运行.net应用
- 5训练需要更改参数吗_糖尿病病人需要多喝水吗?多喝水的5大好处,了解一下...
- Git的使用(推荐命令行模式)
- 【MATLAB统计分析与应用100例】案例009:创建一个RandStream类对象,调用其randn方法生成标准正态分布随机数
- Git之撤销add操作