当我使用html-loader时,如何获得样式背景URL的正确URL?

时间:2016-11-07 01:59:52

标签: webpack webpack-style-loader webpack-html-loader

例如,如果我有test.html文件,则代码为:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8"/>
  <title>test</title>
  <link rel="stylesheet" href="/styles/test.css">
  <style>
    .test {
      background: url("/images/banner.jpg");
    }
  </style>
</head>
<body>
<img src="/images/banner.jpg" alt="test"/>
</body>
</html>

我使用html-loader来要求它,就像:

const html = require(test.html);
console.log(html);

和变量html打印:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8"/>
  <title>test</title>
  <link rel="stylesheet" href="[object Object]">
  <style>
    .test {
      background: url("/images/banner.jpg");
    }
  </style>
</head>
<body>
<img src="/temp/images/banner.d0f7ff.jpg" alt="test"/>
</body>
</html>

style - &gt; .test - &gt; background无法获取正确的网址。如何解决?

这是关于webpack的{​​{1}}配置代码:

html-loader

0 个答案:

没有答案