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

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

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

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

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

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

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

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

转载于:https://www.cnblogs.com/slongs/p/10444674.html