在
html-loader文档中有这个例子
require("html?interpolate=require!./file.ftl");
<#list list as list>
<a href="${list.href!}" />${list.name}</a>
</#list>
<img src="${require(`./images/gallery.png`)}">
<div>${require('./components/gallery.html')}</div>
“名单”来自哪里？如何为插值范围提供参数？
我想做像template-string-loader那样的事情：
var template = require("html?interpolate!./file.html")({data: '123'});
然后在file.html中
<div>${scope.data}</div>
但它不起作用.我试图将模板字符串加载器与html-loader混合,但它不起作用.我只能使用template-string-loader,但HTML中的图像不会被webpack转换.
有任何想法吗？谢谢
解决方法
解决方案1
我找到了另一个解决方案,使用带有插入选项的html-loader.
https://github.com/webpack-contrib/html-loader#interpolation
{ test: /\.(html)$/,include: path.join(__dirname,'src/views'),use: {
loader: 'html-loader',options: {
interpolate: true
}
}
}
然后在html页面中你可以导入部分html和javascript变量.
<!-- Importing top <head> section -->
${require('./partials/top.html')}
<title>Home</title>
</head>
<body>
<!-- Importing navbar -->
${require('./partials/nav.html')}
<!-- Importing variable from javascript file -->
<h1>${require('../js/html-variables.js').hello}</h1>
<!-- Importing footer -->
${require('./partials/footer.html')}
</body>
唯一的缺点是您无法从HtmlWebpackPlugin导入其他变量,如此<％= htmlWebpackPlugin.options.title％> (至少我找不到导入它们的方法)但对我来说这不是问题,只需在你的html中写标题或使用单独的javascript文件来处理变量.
解决方案2
老答案
不确定这是否适合您,但我将分享我的工作流程(在Webpack 3中测试).
而不是html-loader你可以使用这个插件github.com/bazilio91/ejs-compiled-loader：
{ test: /\.ejs$/,use: 'ejs-compiled-loader' }
将.ejs和你的HtmlWebpackPlugin中的.html文件更改为指向正确的.ejs模板：
new HtmlWebpackPlugin({
template: 'src/views/index.ejs',filename: 'index.html',title: 'Home',chunks: ['index']
})
您可以在.ejs文件中导入部分,变量和资源：
SRC /视图/谐音/ head.ejs：
<!DOCTYPE html> <html lang="en"> <head> <Meta charset="UTF-8"/> <Meta http-equiv="X-UA-Compatible" content="IE=edge"/> <Meta name="viewport" content="width=device-width,initial-scale=1"/> <title><%= htmlWebpackPlugin.options.title %></title> </head>
SRC / JS / ejs_variables.js：
const hello = 'Hello!';
const bye = 'Bye!';
export {hello,bye}
SRC /视图/ index.ejs：
<% include src/views/partials/head.ejs %>
<body>
<h2><%= require("../js/ejs_variables.js").hello %></h2>
<img src=<%= require("../../assets/sample_image.jpg") %> />
<h2><%= require("../js/ejs_variables.js").bye %></h2>
</body>
注意,当您包含部分路径时,路径必须相对于项目的根目录.
