在一个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. OneThink-nav标签

    /* 导航列表 */ public function _nav($tag, $content){ trace($tag); trace($content); trace("end" ...

  2. wParam和lParam两个参数到底是什么意思?

    在Windows的消息函数中,有两个非常熟悉的参数:wParam,lParam. 这两个参数的字面意义对于现在的程序来说已经不重要了,因为它是16位系统的产物,为了保持程序的可移植性,就将它保存了下来 ...

  3. ASP.NET MVC搭建项目后台UI框架—8、将View中选择的数据行中的部分数据传入到Controller中

    目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...

  4. 新建 .NET Core 项目 -- Hello World!

    一.开发工具安装 1.可选模式一 (不推荐,此为Windows开发方式) 安装 Visual Studio 2015 / Visual Studio 2015 Update 3 / .NET Core ...

  5. 深入理解和应用display属性(二)

    四.inline-block 此类元素是inline + block的合体 1) margin和padding都有效:width和height都有效: .inline{ display: inline ...

  6. 深入JavaScript:词法分析、连续赋值猜想

    JavaScript:词法分析.连续赋值猜想 原创文章,转摘请注明出处:苏福:http://www.cnblogs.com/susufufu/p/5851642.html 深夜发文,先吐槽下博客园的编 ...

  7. C# Stream 和 byte[] 之间的转换

    一. 二进制转换成图片 MemoryStream ms = new MemoryStream(bytes); ms.Position = ; Image img = Image.FromStream( ...

  8. MyEclipse 2016 CI 4新增BootStrap模板

    Live Preview with CodeLive 目前CodeLive还只有Live Preview这一个功能,在后续的版本中会陆续添加新功能. 新增Bootstrap模板 在模板面板中选择相应的 ...

  9. ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock' (2)

    从供应商手中接手一个云平台(Windwos Azure)上的MySQL数据库,登录数据库时遇到错误: $mysql -uroot -p Enter password: ERROR 2002 (HY00 ...

  10. Nagios学习实践系列——配置研究[监控当前服务器]

    其实上篇Nagios学习实践系列——基本安装篇只是安装了Nagios基本组件,虽然能够打开主页,但是如果不配置相关配置文件文件,那么左边菜单很多页面都打不开,相当于只是一个空壳子.接下来,我们来学习研 ...