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 开发工具报告错误:“无法解码下载的字体: http://localhost:5000/widgets/damian/9789/en” 表明它试图加载该 url 的字体，但该 url 是我的当前位置，我在其中提供 html。而且我不知道为什么要尝试从该 url 中获取字体。

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

当我将 publicPath 更改为:' http://localhost:5000/assets/ 时，一切都解决了'。但这是我想避免的事情，无论如何我想了解为什么会发生这种情况。

我的猜测是，由于样式加载器将 CSS 添加为 Blob，该 css 失去了“当前域”的概念，因此其中没有域的 url 表现得很奇怪。

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

谢谢!!!

Answer 1

找到了。感谢 webpack 的 gitter 上的 @diunarlist。

这是因为我将 sourceMap 与 style-loader 一起使用。查询 https://github.com/webpack/style-loader/issues/55

对于源映射，样式加载器使用 Blob，因此它需要绝对 url 才能工作。

没有 source-maps 它使用内联样式标签，所以没有问题。