当我分别使用 ejs-loader 和 html-loader 时一切正常:
<body>
<%= require('./header.html')({x:1}) %>
</body>
// compiles to:
<body>
<header><div>1</div></header>
</body>
但是当我链接它们时，我得到的是 js 代码而不是 html:
module.exports = function (obj) {
obj || (obj = {});
var __t, __p = '';
with (obj) {
__p += '\n<body>\n ' +
((__t = ( require('./header.html')({x:1}) )) == null ? '' : __t) +
'\n</body>';
}
return __p
}
这是怎么回事，我该如何解决？
这是我的配置:
const config = {
//...
module: {
rules: [
{
test: /\.html$/,
use: ['html-loader', 'ejs-loader']
}
]
},
//...
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/index.html',
})
]
}
最佳答案
我现在正在努力解决同样的问题并找到了答案。
首先，我们需要了解加载器的工作原理。简而言之:它们将任何文件类型作为输入，但加载器的输出始终是 JS，然后 webpack 执行它以获得最终输出。
ejs-loader 和 html-loader 都期望 html 代码作为它们的输入。当我们链接加载器时，第二个加载器接收的不是 HTML，而是第一个加载器返回的 javascript。所以我们需要从那个 JS 制作 HTML。为此，我编写了一个简单的加载器，它需要放在 html- 和 ejs- 加载器之间。
我们称它为“loader.js”:
module.exports = function (source) {
let x = eval(source);
let z = x();
return z;
}
Webpack 配置将是:
module: {
rules: [
{
test: /\.html$/,
use: ['html-loader', path.resolve('loader.js'), 'ejs-loader']
}
]
},
重要提示:顺序或加载器很重要。如果我在链中交换 ejs 和 html 加载器，则 eval 会失败，因为 html-loader 返回的 js 代码具有 eval 无法解析的其他导入。然而，ejs-loader 返回纯独立的代码，使用 eval() 成功评估。
因此，因为加载器以相反的顺序执行，我们首先放置 ejs(意思是 - 在数组的末尾)，然后是我们的中间加载器，而 html-loader 最后(在数组的开头)
更新:有一个现成的加载程序可以完成这项工作，称为 extract-loader。简单的 eval 在许多情况下会失败，而 extract-loader 总是可以正常工作。
关于Webpack:链接加载器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56726509/