11

我的问题是，如果我没有在 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'

我有一个较少的文件，其中指出：

@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 表现得很奇怪。

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

谢谢！！！

4

1 回答 1

11

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

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

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

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

于 2015-06-10T18:04:33.923 回答