Question

我的问题是，如果我没有在output.publicPath配置选项中指定完整的域;那么网址没有正确加载（至少是字体）。

我的webpack配置：

output: {
  ...
  publicPath: '/assets/'
},
module: { 
  loaders: {
    { 
      test: /\.less$/, 
      loader: "style!css?sourceMap!less?sourceMap" 
    },
    { 
      test: /\.(png|jpg|svg|gif|eot|woff|ttf)$/, 
      loader: 'file-loader?name=[path][name]-[hash].[ext]'
    }
  }
},
debug: true,
devtool: 'eval'

我有一个较少的文件说明：

@font-face {
  font-family: 'new-sources';
  src: url('../../fonts/sources-icons-rev-4.eot');
  ...
}

我的服务器位于http://localhost:5000。

当我在chrome中调试时检查生成的CSS时，我发现它已被替换为：

@font-face {
  font-family: 'new-sources';
  src: url(/assets/sdk/v1/fonts/sources-icons-rev-4-fad6f81d012ba56b350abdc714d1fa5a.eot);
  ...
}

哪个看似正确！但无法正常工作Chrome开发工具报告错误：“无法解码下载的字体：http://localhost:5000/widgets/damian/9789/en”表示它尝试加载的网址是url，但该网址是我当前的位置，我正在为此服务HTML。我不知道为什么要尝试从该网址中获取字体。

如果我去：http://localhost:5000/assets/sdk/v1/fonts/sources-icons-rev-4-fad6f81d012ba56b350abdc714d1fa5a.eot。它有效。

当我将publicPath更改为：“http://localhost:5000/assets/”时，所有内容都已解决。但这是我想要避免的，无论如何我想了解为什么会发生这种情况。

我的猜测是，自从样式加载器，将CSS添加为Blob后，css会丢失“当前域名”的概念，因此其中没有域名的网址会很奇怪。

但与此同时，这应该发生在每个使用CSS的webpack的人身上，我还没有看到任何关于它的评论。：S

感谢!!!

Answer 1

找到它。感谢webpack's gitter上的@diunarlist。

这是因为我使用了带有样式加载器的sourceMap。查看https://github.com/webpack/style-loader/issues/55

使用source-maps，样式加载器使用Blob，因此它需要绝对URL才能工作。

如果没有source-maps，它会使用内联样式标记，因此没有问题。

Webpack：我必须在publicPath中指定url（）指令中的域才能在CSS中工作吗？

1 个答案: