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

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. 《YC创业营:硅谷顶级创业孵化器如何改变世界》:YC2011批量天使投资记录 三星推荐

    这个YC创业营是一个硅谷的天使投资基金,每年两次批量投资创业公司.本书说的是2011年YC批量选择了64个创业团队,让他们集中到硅谷办公3个月,给他们创业指导,帮他们找A轮投资. YC创始人偏爱25岁 ...

  2. HTML基础 有序列表写个人收藏夹

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. bzoj2346 & loj2632 [Baltic 2011]Lamp 最短路

    题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=2346 https://loj.ac/problem/2632 题解 普及组难度的题都要想十几分 ...

  4. 特朗普或出席!富士康耗资100亿美元建LCD液晶面板厂

    富士康建液晶工厂,富士康科技集团发言人证实,富士康科技集团将于今年6月28日耗资100亿美元的LCD面板厂举行动工仪式. 富士康周四表示,他已经了解到,仪式将于今年6月28日举行,包括美国总统特朗普总 ...

  5. hive之视图和索引

    一.视图 1.视图定义 视图其实是一个虚表,视图可以允许保存一个查询,并像对待表一样对这个查询进行操作,视图是一个逻辑结构,并不会存储数据. 2.视图的创建 通过创建视图来限制数据访问可以用来保护信息 ...

  6. springBoot相关(一)

    2.0新特性: 编程语言: Java8+.Kotlin 底层框架:Spring Framwork 5.0.x 全新特性: web Flux web Flux: 函数编程:java 8 Lambda 响 ...

  7. NET Core SDK 已安装在VS2017不可见

    本地装了6个版本的net core sdk,但是在vs2017,vs2019 只是显示1.0和1.1: 重装,重启了好几遍也没用,没想到是环境变量PATH顺序问题,将x64的放在x86前,就OK了~:

  8. BestCoder Round #92 (hdu 6015 6016)

    比赛链接 A题主要是map的使用,比赛的时候问了下队友,下次要记住了 #include<bits/stdc++.h> using namespace std; typedef long l ...

  9. session应用:

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8" ...

  10. [CSP-S模拟测试]:attack(支配树+LCA+bitset)

    题目传送门(内部题55) 输入格式 第一行,包含两个整数:$n,m,q$,表示敌军城市数.路数和情报数.接下来$m$行,每行包含两个整数:$u,v$,表示从$u$到$v$包含一条单向道路.接下来$q$ ...