美文网首页
Webpack+Exprss开发Hot Reload模式,静态资

Webpack+Exprss开发Hot Reload模式,静态资

作者: ibadplum | 来源:发表于2017-02-28 23:58 被阅读0次

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

    相关文章

      网友评论

          本文标题:Webpack+Exprss开发Hot Reload模式,静态资

          本文链接:https://www.haomeiwen.com/subject/sagfgttx.html