javascript - webpack的Url-loader引入图片，因相对路径而导致的问题

问题描述

问 题

url-loader会把所有import进来的图片的路径一律替换成name参数的值。

比如参数如：'&name=images/[name].[ext]'时，任何图片都会被替换成./images/[name].[ext]式的相对路径。

**但是CSS里相对路径是相对于CSS文件，而JS文件相对路径是相对于index.html。
导致引入同样的图片，在CSS和JS中指向了不同的目录。**

其中一个会加载失败。

请问如何解决。

解决方案

解决这个问题需要配置好publicPath属性。
file-loader在编译import进来的图片的路径时会添加上publicpath的值。
设置一个全局的publicPath，并在css-loader中设置自己的publicpath覆盖全局值。
这样就好了。

这篇关于javascript - webpack的Url-loader引入图片，因相对路径而导致的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！