Webpack：我必须在 publicPath 中为 url() 指令指定域才能在 CSS 中工作吗？答案

【问题标题】：Webpack: Must i specify the domain in publicPath for url() directive to work in CSS?Webpack：我必须在 publicPath 中为 url() 指令指定域才能在 CSS 中工作吗？
【发布时间】：2015-08-26 01:24:15
【问题描述】：

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

我的 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'

我有一个 less 文件说明：

@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

谢谢！！！

【问题讨论】：

标签： webpack webpack-style-loader

【解决方案1】：

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

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

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

没有源映射它使用内联样式标签，所以没有问题。

【讨论】：