使用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- ...
随机推荐
- Linux之scp命令的使用
Linux之scp命令的使用 1. scp简介 1.1 命令功能: scp是 secure copy的缩写, scp是linux系统下基于ssh登陆进行安全的远程文件拷贝命令.linux的scp命令可 ...
- office2016pro专业版命令行激活
1.首先查看Office2016安装目录在哪里,如果是默认安装,没有修改路径,是在C:\Program Files\Microsoft Office\Office16目录下,具体路径还得自行查看,我的 ...
- python之pandas模块高级用法
一 agg,聚合,可以使用内置的函数 >>> import pandas as pd >>> import numpy as np >>> pp ...
- IntelliJ IDEA设置maven
1.更改默认的maven仓库 2.手动更新maven 项目——也就是下载依赖的jar包 3. 不想每次手动更新,设置IDEA自动更新mav项目,下载jar包
- PCB学习
一.PCB设置 在线DRC:自动更正,会提示短路. 对象捕捉>>智能元件snap,可以智能抓取中心点,勾选 智能TrackEnds: 撤销重做:30步 旋转步骤:90.000(可以按空格旋 ...
- mysql审计插件
Audit Plugin安装使用 原文: https://www.cnblogs.com/waynechou/p/mysql_audit.html#_label0 #有卸载方法 下载地址: htt ...
- 学习React之前你需要知道的的JavaScript基础知识
在我的研讨会期间,更多的材料是关于JavaScript而不是React.其中大部分归结为JavaScript ES6以及功能和语法,但也包括三元运算符,语言中的简写版本,此对象,JavaScript内 ...
- mysql中or和in,in和exists的效率问题
mysql中or和in的效率问题 在网上一直看到的是or和in的效率没啥区别,一直也感觉是这样,前几天刚好在看<mysql数据库开发的36条军规>的文章,里面提到了or和in的 ...
- sql:CallableStatement执行存储过程
/** * 使用CablleStatement调用存储过程 * @author APPle * */ public class Demo1 { /** * 调用带有输入参数的存储过程 * CALL p ...
- DIV置底层或置最高层的方法下拉菜单被挡住
网站常会用到一些 下拉菜单,,幻灯片,,,飘浮广告等. 但经常会发现.幻灯片会挡住下拉菜单或者飘浮广告微信开店等. 解决办法有下 第一,可将幻灯片所在DIV 置于最底层.添加CSS如下 style=& ...