使用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到本地失效,也可以看看是不是这个问题。
网友评论