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

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. 一、AJAX

    一. (function ($) { //1.得到$.ajax的对象 var _ajax = $.ajax; $.ajax = function (options) { //2.每次调用发送ajax请 ...

  2. C#基础知识之类和结构

    虽然项目中一直在使用类.结构体等类型,仔细琢磨,还真无法系统的说出个所以然.记录一下类.结构体.类和结构体区别 一.类 对于类,大家都特别熟悉.简单的介绍一下类的结构,然后记录一下Class需要注意的 ...

  3. 【python实例】要求输出字符串中最少一个最多八个的所有字符串组合(连续)

    """ 题目:字符串str="ABCDEFGHIJK",要求输出最少一个最多八个的所有组合(向后连续字母) 输出如下: A [0::] AB ABC ...

  4. vue的列表交错过渡

    参考文章 https://juejin.im/post/5cccf5b0e51d453a907b4af1

  5. BZOJ5415 [NOI2018] 归程

    今天也要踏上归程了呢~(题外话 kruskal重构树!当时就听学长们说过是重构树辣所以做起来也很快233 就是我们按照a建最大生成树 这样话呢我们就可以通过生成树走到尽量多的点啦 然后呢就是从这个子树 ...

  6. docker-compose运行ES, Kibana和Cerebro

    原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11764003.html docker-compose.yaml version: '2.2' serv ...

  7. 报错——selinux配置文件修改错误导致无法启动虚拟机

    selinux配置文件修改错误导致无法启动虚拟机 问题 错误修改配置文件 [root@centos73 ~]# cat /etc/selinux/config # This file controls ...

  8. 【Linux】【Kibana】解决Kibana启动失败:Data too large问题

    今天重启Kibana容器,结果启动不了,一看日志发现是Data数据量太大报错. FATAL [circuit_breaking_exception] [parent] Data too large, ...

  9. window安装oracle和创建数据库

    原文地址: https://www.cnblogs.com/hoobey/p/6010804.html  #11g安装 https://www.cnblogs.com/qq1272850043/p/6 ...

  10. C#面向对象笔记

    1.面向对象核心概念 (1)类是抽象,对象是实例,new一个对象会分配一块堆空间,对象指向该空间的地址,将对象赋值给另一个对象,只是将地址赋给它,指向的是同一块空间. e.g. class Car { ...