Webpack+Exprss开发Hot Reload模式,静态资源加载失败

使用Webpack +Express作为构建环境,开发React。
启用Hot Reload(Hot Module Replacement)的时候,CSS里面写的静态资源无法正常加载,例如background(/static/img/a.xxxx.png),死活不加载图片,但是直接访问http://localhost:8080/static/img/a.xxxx.png是可以的。
所以我设置了,output的publicPath为http://localhost:8080/解决问题。

然后仔细研究了下,找到了问题所在,在配置了某些模式的情况下,放在html里的css不是一个完整版,而是一些片段,类似"blob:http://localhost:8080/725a6814-1655-49b1-9d42-5a52b7ccd6f4"。也找到了相关文档:https://github.com/webpack-contrib/style-loader/issues/55。这种blob明显导致相对路径失效,因此要么打成base64,要么就用绝对路径吧。
build出来的文件不存在这个问题。

ps,有很多人使用ant-desgin的时候配置icon-url到本地失效,也可以看看是不是这个问题。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 构建一个小项目——FlyBird,学习webpack和react。(本文成文于2017/2/25) 从webpac...
    布蕾布蕾阅读 16,938评论 31 98
  • 版权声明:本文为博主原创文章,未经博主允许不得转载。 webpack介绍和使用 一、webpack介绍 1、由来 ...
    it筱竹阅读 11,266评论 0 21
  • webpack 介绍 webpack 是什么 为什么引入新的打包工具 webpack 核心思想 webpack 安...
    yxsGert阅读 6,540评论 2 71
  • 10:25 差点忘记还有写短文这件事,可能这是一种日记吧 管他呢 想写就写了呗! 今天准备第一天减肥了,原因是女朋...
    酒窝大青年阅读 188评论 0 0
  • 透过图,了解了。 不需证据,不需证言,你的眼神,是最有力证明。 那是我抓不住,得不到的。 近水楼台先得月,千古流传...
    咖啡失灵阅读 219评论 0 0