Webpack 使用publicPath 解决图片或者字体无法显示引用失败的问题

2024-01-07 04:06•css•阅读 3209

做项目的时候遇到个问题，css中的背景图片无法正常加载，检查原因之后，发现是应为引用的路径有问题，所以导致了图片引用失败。

有没有什么方法能够很方便的css中图片文件的引用路径呢，webpack中publicPath可以可方便的解决

output: {
        path: "/home/proj/cdn/assets/[hash]",
        publicPath: "http://cdn.example.com/assets/"
},

publicPath 会在引用文件的时候，将路径前面添加一个前缀，也就是将publicPath的值拼接到引用路径的前面，所以在publicPath设置一下路径就可以了。

有时候引用前缀在打包的时候无法确认需要后来修改，那么就入口文件中添加__webpack_public_path__全局变量

*** 如果你在入口文件中使用 ES6 模块导入，则在导入后对__webpack_public_path__进行赋值。在这种情况下，你必须将公共路径(public path)赋值移至自己的专属模块，然后将其导入到你的入口文件之上：***

// public-path.js
__webpack_public_path__ = "http://cdn.example.com/assets/"  // 这里可以换成变量获取 比如 window.publickPath 其中这个publickPath变量可以由后端直接在html模版中替换

// 入口文件 index.js
import './public-path'; // 特别要注意 放到第一行

这样就可以解决编译时不知道最终输出文件的 publicPath，需要动态设置publicPath的问题了