在一个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. java Io缓冲区复制文件

    //直接写代码了  类和包自己导入创建 ,手打很累的 public static void main(String args[]){ FileReader fr=null;   //文件输入流 Fil ...

  2. VB6.0 和VB.NET 函数对比

    VB6.0和VB.Net的对照表 VB6.0 VB.NET AddItem Object名.AddItem Object名.Items.Add ListBox1.Items.Add ComboBox1 ...

  3. CSS中详解hight属性

    目录结构: // contents structure [-] hight属性值类型一览表 height的%的使用 定义 实例 需要注意的 参考文章 hight属性值类型一览表 value descr ...

  4. CSS、j's单行、多行文本溢出显示省略号

    在项目中,由于实际描述文字过多,导致初始页面纵向长度过长,也使得余下信息利用率降低:所以在文字过多的时候,初始化限制行数是有必要的 1. CSS单行文本溢出,显示省略号 <div style=& ...

  5. 使用mvc时,在视图view中使用强类型视图,在web.config文件中添加命名空间namespace的引用不起作用,解决方法

    这是view中的model代码: @model t_user_info 这是web.config配置文件只的代码: <namespaces> <add namespace=" ...

  6. bootstrap无限级分类 jq拓展 之前的无限级分类的封装版~

    git地址:https://github.com/zhangjiahao93/jQ.select HTML部分 <!DOCTYPE html> <html> <head ...

  7. VBoxManage命令

    查看有哪些虚拟机VBoxManage list vms 查看虚拟的详细信息VBoxManage list vms –long 查看运行着的虚拟机VBoxManage list runningvms 开 ...

  8. iOS 获取相册中图片的名字 url

    __block NSString *imageFileName; NSURL *imageURL = [info valueForKey:UIImagePickerControllerReferenc ...

  9. 转载文档:Storm实战常见问题及解决方案

    该文档为实实在在的原创文档,转载请注明: http://blog.sina.com.cn/s/blog_8c243ea30101k0k1.html 类型 详细 备注 该文档是群里几个朋友在storm实 ...

  10. ASP.NET MVC 的 WebGrid 的 6 个重要技巧 【已翻译100%】

    ASP.NET MVC 中 WebGrid 的 6 个重要技巧 https://www.oschina.net/translate/webgrid-in-asp-net-mvc-important-t ...