首先看到我们的文件夹目录如下:

webpack.config.js

//解析分离css
const ExtractTextPlugin = require('extract-text-webpack-plugin')

plugins: [

//最后的css文件打包路径
new ExtractTextPlugin('css/[name].[hash:8].css')
]

//

rules:[

//处理图片css路径,如果css和要引入的img路径在一个地方,就不用加publicPath:'../'

{
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: 'css-loader', 
fallback: 'style-loader',
publicPath:'../'
})
},

{
test:/\.(png|jpg|gif|svg)$/,
use:[{
loader:'url-loader',
options:{
limit:50000,
outputPath:'images'
}
}]
}

]

使用extract-text-webpack-plugin处理css文件路径问题的更多相关文章

  1. webpack生成的css文件background-image url图片无法加载

    之前在使用webpack3构建基于less预处理的项目时,在对指定的元素使用background-image: url(xxx)来设置背景图片时,本地开发是ok的,但是在项目编译产出后背景图片就找不到 ...

  2. webpack快速入门——CSS文件打包

    1.在src下新建css文件,在css文件下新建index.css文件,输入以下代码 body{ background:pink; color:yellowgreen; } 2.css建立好后,需要引 ...

  3. webpack加载css文件及其配置

    webpack加载css文件及其配置 当我们写了几个css文件之后如果想要引用到html中去的话我们最开始的方式就是通过link标签将css文件导入进去,但是如果我们的css文件有很多的话,一个个的导 ...

  4. webpack配置:css文件打包、JS压缩打包和HTML文件发布

    一.CSS文件打包 1.在src下新建css文件,在css文件下新建index.css文件,输入以下代码 body{ color:red; font-size:20px; } 2.css建立好后,需要 ...

  5. 使用Maven构建Java Web项目时,关于jsp中引入js、css文件路径问题。

    今天有点闲,自己动手搭建一个Java Web项目,遇到jsp中引入js.css文件时路径不正确的问题,于是在网上查阅了很多资料,最终都无法解决问题,于是,上stackoverflow找到了解决方法,这 ...

  6. 关于WEB-INF目录不提供外部访问及JSP引用 js,css 文件路径问题

    在 web 项目开发过程中,我们常常使用到 JSP,以及对静态资源,js,css 等引用,但是我们应该把这些资源文件放在哪个目录下面咧,怎么引用. 当然如果是前后端分离的项目倒不用考虑这些. WEB- ...

  7. vue webpack打包后.css文件里面的背景图片路径错误解决方法

    资源相对引用路径 问题描述 一般情况下,通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static ...

  8. webpack快速入门——CSS进阶,Less文件的打包和分离

    1.要使用less,首先使用npm安装less服务 cnpm install less --save-dev 还需要安装Less-loader用来打包使用. cnpm install less-loa ...

  9. webpack快速入门——CSS进阶:SASS文件的打包和分离

    1.安裝:因为sass-loader依赖于node-sass,所以需要先安装node-sass cnpm install node-sass --save-dev cnpm install sass- ...

随机推荐

  1. Django 高级配置

    目录 Django 信号 信号系统三要素: 信号的分类: Django 内置信号: 具体 Django 信号内容 定义信号 发送信号 接收信号 信号接收器 防止重复信号 Django 内置信号操作步骤 ...

  2. python集合set,交集,并集,差集,对称差集,子集和超集

    python集合set,交集,并集,差集,对称差集,子集和超集 x = {1, 2, 3, 4} y = {2, 4, 5, 6} # 交集(取x中与y中相同部分) print(x.intersect ...

  3. txt_to_csv

    import csv def txt2csv(inf, outf): with open(inf,'r') as fin, open(outf,'w',newline='') as fout: wrt ...

  4. hdu1214 圆桌会议

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1214 HDU ACM集训队的队员在暑假集训时经常要讨论自己在做题中遇到的问题.每当面临自己解决不了的问 ...

  5. python读取pcap包

    import struct class FileConvert(object): ''' test python file''' def __init__(self): self.aa = 0 sel ...

  6. Hibernate与 MyBatis的区别

    第一章     Hibernate与MyBatis Hibernate 是当前最流行的O/R mapping框架,它出身于sf.net,现在已经成为Jboss的一部分. Mybatis 是另外一种优秀 ...

  7. VisualVM监控远程主机

    参考博客 https://blog.csdn.net/u010004317/article/details/82948040 https://blog.csdn.net/lienfeng6/artic ...

  8. $NOIP2018$ 暴踩全场计划实施方案

    \(NOIP2018\) 暴踩全场计划实施方案 改完题辣!该更博辣!(这么激动干嘛反正又没人看) 我要取一个霸气的名字.于是就这样了.原本打算是暴踩yyb计划实施方案的(来啊互相伤害啊) 信心流选手就 ...

  9. BZOJ3331 BZOJ2013 压力

    考前挣扎 圆方树这么早就出现了嘛... 要求每个点必须被经过的次数 所以就是路径上的割点/端点++ 由于圆方树上所有非叶子圆点都是割点 所以就是树上差分就可以辣. 实现的时候出了一点小问题. 就是这里 ...

  10. Vue通信的10种方式

    1.10种通信方式 10种:https://juejin.im/post/5bd18c72e51d455e3f6e4334 2.除此之外,还有children和ref. 需要注意 $children  ...