使用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- ...
随机推荐
- 8VC Venture Cup 2017 - Elimination Round - B
题目链接:http://codeforces.com/contest/755/problem/B 题意:给定PolandBall 和EnemyBall 这2个人要说的单词,然后每一回合轮到的人要说一个 ...
- Informatica参考
近日在做informatica项目时,要求参照informatica中原有的mapping方式实现.那么当知道源表或者目标表或者是映射时,如何快速的找出分散在不同的Subject的mapping或者是 ...
- 洛谷P3830 随机树(SHOI2012)概率期望DP
题意:中文题,按照题目要求的二叉树生成方式,问(1)叶平均深度 (2)树平均深度 解法:这道题看完题之后完全没头绪,无奈看题解果然不是我能想到的qwq.题解参考https://blog.csdn.ne ...
- OpenStack虚拟机网络问题
当发现你的OpenStack虚拟机网络有问题,不妨先试一下这16个步骤 1. Security Group全部打开,这是最基本的,但是很多人容易忘记 其实遇到过无数这种场景了,Debug了半天网络 ...
- GO string 的学习
1.replace func Replace(s, old, new string, n int) string s:原来的字符串 old: 要被替换的久的字符串 new string:要替换旧字符串 ...
- Prometheus指标采集常用配置
一.node-exporter配置textfile收集器 textfile收集器作用: 运行暴露自定义指标.例如,需要在某个被监控节点上添加一个地理位置的指标. node-exporter会自动启动t ...
- I/O性能优化
原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11525014.html Linux 系统的 I/O 栈图 I/O性能指标 根据指标找工具 根据工具查指 ...
- Git使用包括切换分支
- C# 简单软件有效期注册的实现
◆需求:公司一直以来对开发的产品都没有进行使用时间的控制,要么就是将日期限制写死在程序里面,每次都要编译新程序再发给客户,很不方便.于是公司让我写个模块,要求如下:1.无论哪个新开发的程序只要调用这个 ...
- [CSP-S模拟测试]:Walk(BFS+建边)
题目描述 在比特镇一共有$n$个街区,编号依次为$1$到$n$,它们之间通过若干条单向道路连接. 比特镇的交通系统极具特色,除了$m$条单向道路之外,每个街区还有一个编码${val}_i$,不同街区可 ...