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

bendan520 2023年9月1日 webpack 0

当我做一个项目时，我遇到了一个问题。 CSS 中的背景图像无法正确加载。检查原因后发现是引用的路径有问题，导致图片引用失败。

有没有什么办法可以方便的引用css中图片文件的路径呢？ webpack中的publicPath可以轻松解决

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

publicPath在引用文件时会在路径后面添加前缀，即将publicPath的值拼接到引用路径的末尾webpack 全局引用，所以只需在publicPath中设置路径即可。

有时无法确认引用前缀，需要稍后打包时更改webpack 全局引用，然后在入口文件中添加 __webpack_public_path__ 全局变量

// 入口文件
__webpack_public_path__ = "http://cdn.example.com/assets/[hash]/"