如何为webpack html-loader插值提供参数? [英] How can I provide parameters for webpack html-loader interpolation?
问题描述
在 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>
列表"来自哪里?如何为插值范围提供参数?
Where does "list" come from? How can I provide parameters to the interpolation scope?
我想做类似 template-string-loader 这样的操作:
I would like to do something like template-string-loader does:
var template = require("html?interpolate!./file.html")({data: '123'});
，然后在file.html
and then in file.html
<div>${scope.data}</div>
但是它不起作用.我尝试将template-string-loader与html-loader混合使用，但不起作用.我只能使用template-string-loader，但HTML中的图像不会被webpack转换.
But it doesn't work. I have try to mix the template-string-loader with the html-loader but it doesn't works. I could only use the template-string-loader but then the images in the HTML are not transformed by webpack.
有什么想法吗?谢谢
推荐答案
解决方案1
我找到了另一种解决方案，将html-loader与interpolate选项一起使用.
Solution 1
I found another solution, using html-loader with interpolate option.
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变量.
And then in html page you can import partials html and javascript variables.
<!-- 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.options.title %>从HtmlWebpackPlugin导入其他变量(至少我找不到导入它们的方法)，但对我来说这不是问题，只需写标题即可在您的html中，或使用一个单独的javascript文件处理变量.
The only downside is that you can't import other variables from HtmlWebpackPlugin like this <%= htmlWebpackPlugin.options.title %> (at least I can't find a way to import them) but for me it's not an issue, just write the title in your html or use a separate javascript file for handle variables.
旧答案
不确定这是否是您合适的解决方案，但我将分享我的工作流程(已在Webpack 3中进行了测试).
Not sure if this is the right solution for you but I'll share my workflow (tested in Webpack 3).
您可以代替html-loader使用此插件 github.com/bazilio91/ejs-compiled-加载程序:
Instead of html-loader you can use this plugin github.com/bazilio91/ejs-compiled-loader:
{ test: /\.ejs$/, use: 'ejs-compiled-loader' }
更改.ejs中的.html文件和HtmlWebpackPlugin，以指向正确的.ejs模板:
Change your .html files in .ejs and your HtmlWebpackPlugin to point to the right .ejs template:
new HtmlWebpackPlugin({
template: 'src/views/index.ejs',
filename: 'index.html',
title: 'Home',
chunks: ['index']
})
您可以在.ejs文件中导入部分，变量和资产:
You can import partials, variables, and assets in .ejs files:
src/views/partials/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/views/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>
请注意，当包含部分内容时，路径必须相对于项目的根目录.
A note, when you include a partial the path must be relative to the root of your project.
这篇关于如何为webpack html-loader插值提供参数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
