在一个main.js中require一个scss文件,scss文件中用了背景图片,图片url是用的相对路径,用extract-text-webpack-plugin插件提取出的css文件背景图片路径不对,解决这个问题其实很简单,就是在output选项中配置publicPath属性,值为"http://localhost:端口号/",后面的斜杠符合"/"必须有,这样生成的背景图片url路径就是绝对路径了,这样就能正确加载出图片了。

     output:{
publicPath:'http://localhost:8088/',
path:__dirname + '/public', //通过HtmlWebpackPlugin插件生成的html文件存放在这个目录下面
filename:'js/[name].js', //编译生成的js文件存放到根目录下面的js目录下面,如果js目录不存在则自动创建
/*
* chunkFilename用来打包require.ensure方法中引入的模块,如果该方法中没有引入任何模块则不会生成任何chunk块文件
* 比如在main.js文件中,require.ensure([],function(require){alert(11);}),这样不会打包块文件
* 只有这样才会打包生成块文件require.ensure([],function(require){alert(11);require('./greeter')})
* 或者这样require.ensure(['./greeter'],function(require){alert(11);})
* chunk的hash值只有在require.ensure中引入的模块发生变化,hash值才会改变
* 注意:对于不是在ensure方法中引入的模块,此属性不会生效,只能用CommonsChunkPlugin插件来提取
* */
chunkFilename:'js/[chunkhash:8].chunk.js'
}

不只css中的背景图片地址是绝对路径,html文件中引入的css和js都是绝对路径。

用extract-text-webpack-plugin提取出来的css文件中背景图片url的不正确的问题的更多相关文章

  1. 透过现象看webpack处理css文件中图片路径转换的具体过程

    webpack是目前使用比较流行的一个前端模块打包器,前端的任何资源都被当成一个模块来处理,如图片.css文件等等.在基于webpack构建的前端项目中,一般都会配置有关css文件处理的规则,这其中也 ...

  2. Java 使用PDFBox提取PDF文件中的图片

    今天做PDF文件解析,遇到一个需求:提取文件中的图片并保存.使用的是流行的apache开源jar包pdfbox, 但还是遇到坑了,比如pdfbox版本太高或太低都不能用!!这个包竟然没有很好地做好兼容 ...

  3. Linux shell 中提取zip或jar文件中的某个文件

    Linux shell 中提取zip或jar文件中的某个文件 假如有个压缩包 abc.jar, 里面文件如下 (可以用unzip -l abc.jar 查看): data/1.txt data/2.t ...

  4. c# 提取word文件中的图片问题

    最近遇到一个项目就是要从一份word中提取出所有的图片信息,功能看起来不是很难,只要使用office自带的Microsoft.Office.Interop.Word就可以解决问题.网上也有不少的文章来 ...

  5. java 提取(解压)zip文件中特定后缀的文件并保存到指定目录

    内容简介 本文主要介绍使用ZipFile来提取zip压缩文件中特定后缀(如:png,jpg)的文件并保存到指定目录下. 导入包:import java.util.zip.ZipFile; 如需添加对r ...

  6. java 提取(解压)rar文件中特定后缀的文件并保存到指定目录

    内容简介 本文主要介绍使用junrar来提取rar压缩文件中特定后缀(如:png,jpg)的文件并保存到指定目录下. 支持v4及以下版本压缩文件,不支持v5及以上. 在rar文件上右键,查看属性,在压 ...

  7. 使用ffmpeg从mp4文件中提取视频流到h264文件中

    ffmpeg -i 2018.mp4 -codec copy -bsf: h264_mp4toannexb -f h264 tmp. 注释: -i 2018.mp4:  是输入的MP4文件 -code ...

  8. webpack中的图片打包之路

    最近在Github上弄项目,需要搭建一个webpack开发环境.Emmm,是的,从0开始搭建一个项目确实不容易,光Webpack的坑就够我踩一路的了.这不,刚搭建到“图片打包”这里,就遇到了麻烦.最后 ...

  9. 翻译 | 关键CSS和Webpack: 减少阻塞渲染的CSS的自动化解决方案

    原文地址: Critical CSS and Webpack: Automatically Minimize Render-Blocking CSS 原文作者: Anthony Gore 译者: 蜗牛 ...

随机推荐

  1. Java03

      字符输入   Scanner scan = new Scanner(System.in); char ch = scan.next().charAt(0);   车到路口例   package C ...

  2. WebApi系列~FromUri参数自动解析成实体的要求

    回到目录 关于webapi我之前写了一些文章,大家可以根据目录去浏览,今天要说的是个怪问题,也是被我忽略的一个问题,当你的Url参数需要被Api自动解析成实体的属性,实事上是要有条件的,不是所以属性都 ...

  3. 在sharepoint2013中如使用PowerView

    在sharepoint2013中如使用PowerView 安装前提 Sql sqlserver 2012 sp1 Sharepoint2013 Sql server 2012 sp1 PowerPiv ...

  4. SharePoint 2013 搭建app本地开发环境

    使用SharePoint App,如果要通过应用程序目录分发 SharePoint 相关应用程序,如具有完全控制权限的 SharePoint 相关应用程序(无法部署到 Office 365 网站),则 ...

  5. Linux系统NFS网络文件系统

    Linux系统NFS网络文件系统 NFS(network file system)网络文件系统,就是通过网络让不同的主机系统之间可以共享文件或目录,此种方法NFS客户端使用挂载的方式让共享文件或目录到 ...

  6. 在Autodesk应用程序商店发布基于浏览器的Web应用程序

    你一定已经听说过Autodesk应用程序商店了,通过Autodesk应用程序商店,你可以免费下载或购买来自全球的优秀开发者发布的应用程序,来帮助你更快更方便的完成你的工作.而且作为开发者,您也可以在A ...

  7. iOS多线程之5.GCD的基本使用

      上一篇文章我对GCD的几个基本概念做了介绍,但是大家看完了可能觉得对理解GCD并没有什么卵用.其实会用GCD其实很简单,只要记住两条就可以了. 1. 主队列里的任务必须在异步函数中执行.   主队 ...

  8. android 史上最简单易懂的跨进程通讯(Messenger)!

    不需要AIDL也不需要复杂的ContentProvider,也不需要SharedPreferences或者共享存储文件! 只需要简单易懂的Messenger,它也称为信使,通过它可以在不同进程中传递m ...

  9. C语言关于利用sscanf实现字符串相加减

    #include<stdio.h>#include<string.h>void main(){ int a; int b; char str1[10] = "9999 ...

  10. SqlServer--聚合函数

    --聚合函数默认把整个表中的数据当做"一组",然后才进行的统计. select * from NewPerson --统计出所有人的年龄的总和 select sum(age) as ...