Webpack:我必须在publicPath中指定url()指令中的域才能在CSS中工作吗？

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 dev工具报告错误:"无法解码下载的字体:http:// localhost:5000/widgets/damian/9789/en "表示它试图加载一个url的字体,但该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的gitter上的@diunarlist.

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

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

没有source-maps,它使用内联样式标记,因此没有问题.