for example, if i have a test.html file, the code is:
<!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>
i use html-loader to require it, just like:
const html = require(test.html);
console.log(html);
and the variable html print:
<!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>
the style -> .test -> background can't get the correct url. How to resolve it ?
This is my webpack config code about html-loader:
{
test: /\.html$/,
include: [
path.resolve(config.devDir)
],
loader: 'html',
query: {
root: config.devDir,
attrs: ['img:src', 'img:data-src', 'link:href']
}
}
