使用extract-text-webpack-plugin处理css文件路径问题
首先看到我们的文件夹目录如下:

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文件路径问题的更多相关文章
- webpack生成的css文件background-image url图片无法加载
之前在使用webpack3构建基于less预处理的项目时,在对指定的元素使用background-image: url(xxx)来设置背景图片时,本地开发是ok的,但是在项目编译产出后背景图片就找不到 ...
- webpack快速入门——CSS文件打包
1.在src下新建css文件,在css文件下新建index.css文件,输入以下代码 body{ background:pink; color:yellowgreen; } 2.css建立好后,需要引 ...
- webpack加载css文件及其配置
webpack加载css文件及其配置 当我们写了几个css文件之后如果想要引用到html中去的话我们最开始的方式就是通过link标签将css文件导入进去,但是如果我们的css文件有很多的话,一个个的导 ...
- webpack配置:css文件打包、JS压缩打包和HTML文件发布
一.CSS文件打包 1.在src下新建css文件,在css文件下新建index.css文件,输入以下代码 body{ color:red; font-size:20px; } 2.css建立好后,需要 ...
- 使用Maven构建Java Web项目时,关于jsp中引入js、css文件路径问题。
今天有点闲,自己动手搭建一个Java Web项目,遇到jsp中引入js.css文件时路径不正确的问题,于是在网上查阅了很多资料,最终都无法解决问题,于是,上stackoverflow找到了解决方法,这 ...
- 关于WEB-INF目录不提供外部访问及JSP引用 js,css 文件路径问题
在 web 项目开发过程中,我们常常使用到 JSP,以及对静态资源,js,css 等引用,但是我们应该把这些资源文件放在哪个目录下面咧,怎么引用. 当然如果是前后端分离的项目倒不用考虑这些. WEB- ...
- vue webpack打包后.css文件里面的背景图片路径错误解决方法
资源相对引用路径 问题描述 一般情况下,通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static ...
- webpack快速入门——CSS进阶,Less文件的打包和分离
1.要使用less,首先使用npm安装less服务 cnpm install less --save-dev 还需要安装Less-loader用来打包使用. cnpm install less-loa ...
- webpack快速入门——CSS进阶:SASS文件的打包和分离
1.安裝:因为sass-loader依赖于node-sass,所以需要先安装node-sass cnpm install node-sass --save-dev cnpm install sass- ...
随机推荐
- 6层PCB设计技巧和步骤
6层PCB设计技巧和步骤 一.原理图的编辑 6层板由于PCB板中可以有两层地,所以可以将模拟地和数字地分开.对于统一地还是分开地,涉及到电磁干扰中信号的最小回流路径问题,绘制完原理图,别忘检查错误和 ...
- How To Find Out Attachments By File Type In Outlook?
ext: (extension extension) Take the attachments of zip files and of txt files for example, just ente ...
- python 的文件编码处理
python的文件编码处理有点粗鲁 1.不管文件原来是编码类型,读入后都转换成Unicode的编码 2.写入文件时,write函数把变量以读入文件的编码方式写入(根据open(path,mode,en ...
- Navicat Premium 12 如何连接阿里云虚拟主机SQL Server 数据库
这个是一台 阿里云购买云虚拟主机!密码已经重置完毕,现在我们 需要知道 数据连接的地址,数据库名,帐号以及密码. 根据不同的运营商 选择 这里我们选择阿里云 云数据库 SQL Server版本 填写 ...
- 原理图和PCB元件对应查找--Altium Designer
画PCB的时候,需要经常的去查看原理图上对应的元件,元件数目少还好找,数目多了找起来就比较扯淡.还好Altium Designer提供了不错的交叉查找功能. 建议使用两个显示器,一个显示器放原理图,另 ...
- Delphi界面篇之ListView控件
//增加项或列(字段) ListView1.Clear; ListView1.Columns.Clear; ListView1.Columns.Add; ListView1.Columns.Add; ...
- BZOJ 2741: 【FOTILE模拟赛】L(可持久化Trie+分块)
传送门 解题思路 首先求出前缀异或和,那么问题就转化成了区间内选两个数使得其异或和最大.数据范围不是很大考虑分块,设\(f[x][i]\)表示第\(x\)块开头到\(i\)这个位置与\(a[i]\)异 ...
- 【靶场练习_sqli-labs】SQLi-LABS Page-2 (Adv Injections)
Less-21:括号+单引号绕过+base64cookie编码 总感觉我已经把sql注入做成代码审计了:P <?php //including the Mysql connect paramet ...
- [CSP-S模拟测试]:蔬菜(二维莫队)
题目描述 小$C$在家中开垦了一块菜地,可以抽象成一个$r\times c$大小的矩形区域,菜地的每个位置都种着一种蔬菜.秋天到了,小$C$家的菜地丰收了. 小$C$拟定了$q$种采摘蔬菜的计划,计划 ...
- LINUX为什么要进行内核移植 内核移植的作用
LINUX为什么要进行内核移植 内核移植的作用,不移植能用么? LZ的问题应该是为什么要重新编译内核吧.既然你已经可以跑了,证明你现在用的内核已经移植到你用的硬件上,自然你也不需要做什么移植.通常 ...