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

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. neuoj Blurred Pictures(小思维题

    https://oj.neu.edu.cn/problem/1505 题意:一张由n*n的照片,每行从第ai个像素点到第bi个像素点是非模糊点,要求找出最大的正方形,该正方形中的像素都是非模糊点. 思 ...

  2. 【串线篇】SQL映射文件select简单查询标签

    一.参数(Parameters)传递 单个参数 基本类型:取值#{hahaha}随便写 多个参数 <!--   public Employee getEmpById(Integer id,Str ...

  3. CentOS7.5常用命令

    常用命令: 关机shutdown -h now 参数:重启-r定时-r 23:59 分-r 10 查源软件yum list |grep telnet参数:安装install 服务启动systemctl ...

  4. java编程实战

    线程池为什么要有它: 线程创建要开辟虚拟机栈,释放线程要垃圾回收的. server端要并发访问数据库的. 服务器启动有线程池放着. ----- 线程池的概念: 1.任务队列 2.拒绝策略(抛出异常,直 ...

  5. python使用qq邮箱向163邮箱发送邮件、附件

    在生成html测试报告后 import smtplib,time from email.mime.text import MIMEText from email.mime.multipart impo ...

  6. 输入流之顶层抽象InputStream

    该类是所有二进制输入流的的抽象父类 类中主要方法解释说明如下 (1)public abstract int read() throws IOException; 该方法是从输入流中读取下一个字节,返回 ...

  7. tomcat启动一闪而过处理

    进入tomcat安装目录(解压目录)下的bin目录,比如D:\Tomcat1\apache-tomcat-7.0.810\bin,打开startup.bat文件,在最上面加上下面两句: SET JAV ...

  8. Python基础教程(018)--官方解释器交互运行

    前言: 在交互式运行Python程序 内容 在Python的shell中直接输入Python的代码,可以立即执行结果 交互式运行Python的优缺点 1,缺点--代码不能保存 2,不适合运行太大的程序 ...

  9. [CSP-S模拟测试]:Lost My Music(凸包)

    题目描述 小$w$在天堂看到了一棵世界树.世界树上有$n$个节点,其中$1$节点为根,每个节点有一个正整数权值$c_i$.现在小$w$想要对每个节点$u$求出它的祖先$v$中$\frac{c_v-c_ ...

  10. Cent OS (一)Cents OS的基本安装

    1.实验环境: VMware Workstation Pro   14 Pro Cent OS 7 系列. 2. 镜像地址传送门: 阿里云开源镜像站:http://mirrors.aliyun.com ...