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

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. 6层PCB设计技巧和步骤

    6层PCB设计技巧和步骤 一.原理图的编辑  6层板由于PCB板中可以有两层地,所以可以将模拟地和数字地分开.对于统一地还是分开地,涉及到电磁干扰中信号的最小回流路径问题,绘制完原理图,别忘检查错误和 ...

  2. How To Find Out Attachments By File Type In Outlook?

    ext: (extension extension) Take the attachments of zip files and of txt files for example, just ente ...

  3. python 的文件编码处理

    python的文件编码处理有点粗鲁 1.不管文件原来是编码类型,读入后都转换成Unicode的编码 2.写入文件时,write函数把变量以读入文件的编码方式写入(根据open(path,mode,en ...

  4. Navicat Premium 12 如何连接阿里云虚拟主机SQL Server 数据库

    这个是一台 阿里云购买云虚拟主机!密码已经重置完毕,现在我们 需要知道 数据连接的地址,数据库名,帐号以及密码. 根据不同的运营商 选择 这里我们选择阿里云 云数据库 SQL Server版本 填写 ...

  5. 原理图和PCB元件对应查找--Altium Designer

    画PCB的时候,需要经常的去查看原理图上对应的元件,元件数目少还好找,数目多了找起来就比较扯淡.还好Altium Designer提供了不错的交叉查找功能. 建议使用两个显示器,一个显示器放原理图,另 ...

  6. Delphi界面篇之ListView控件

    //增加项或列(字段) ListView1.Clear; ListView1.Columns.Clear; ListView1.Columns.Add; ListView1.Columns.Add; ...

  7. BZOJ 2741: 【FOTILE模拟赛】L(可持久化Trie+分块)

    传送门 解题思路 首先求出前缀异或和,那么问题就转化成了区间内选两个数使得其异或和最大.数据范围不是很大考虑分块,设\(f[x][i]\)表示第\(x\)块开头到\(i\)这个位置与\(a[i]\)异 ...

  8. 【靶场练习_sqli-labs】SQLi-LABS Page-2 (Adv Injections)

    Less-21:括号+单引号绕过+base64cookie编码 总感觉我已经把sql注入做成代码审计了:P <?php //including the Mysql connect paramet ...

  9. [CSP-S模拟测试]:蔬菜(二维莫队)

    题目描述 小$C$在家中开垦了一块菜地,可以抽象成一个$r\times c$大小的矩形区域,菜地的每个位置都种着一种蔬菜.秋天到了,小$C$家的菜地丰收了. 小$C$拟定了$q$种采摘蔬菜的计划,计划 ...

  10. LINUX为什么要进行内核移植 内核移植的作用

    LINUX为什么要进行内核移植 内核移植的作用,不移植能用么?   LZ的问题应该是为什么要重新编译内核吧.既然你已经可以跑了,证明你现在用的内核已经移植到你用的硬件上,自然你也不需要做什么移植.通常 ...