如何为 webpack html-loader 插值提供参数? - IT屋-程序员软件开发技术分享社区
首页 其他开发 如何为 webpack html-loader 插值提供参数?
如何为 webpack html-loader 插值提供参数?
[英] How can I provide parameters for webpack html-loader interpolation?
本文介绍了如何为 webpack html-loader 插值提供参数?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在 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
${scope.data}
但它不起作用.我尝试将模板字符串加载器与 html-loader 混合使用，但它不起作用.我只能使用模板字符串加载器，但是 HTML 中的图像不会被 webpack 转换.
有什么想法吗?谢谢
解决方案
解决方案 1 我找到了另一种解决方案，使用带有 interpolate 选项的 html-loader.
https://github.com/webpack-contrib/html-loader#interpolation
{ test:/.(html)$/,包括: path.join(__dirname, 'src/views'),利用: {loader: 'html-loader',选项: {插值:真}}}然后在 html 页面中，您可以导入部分 html 和 javascript 变量.
${require('./partials/top.html')}<title>首页</title><身体><!-- 导入导航栏 -->${require('./partials/nav.html')}<!-- 从javascript文件导入变量--><h1>${require('../js/html-variables.js').hello}</h1><!-- 导入页脚-->${require('./partials/footer.html')} 唯一的缺点是你不能像这样从 HtmlWebpackPlugin 导入其他变量 <%= htmlWebpackPlugin.options.title %>(至少我可以找不到导入它们的方法)但对我来说这不是问题，只需在 html 中写入标题或使用单独的 javascript 文件作为句柄变量即可.
解决方案 2 旧答案
不确定这是否适合您，但我会分享我的工作流程(在 Webpack 3 中测试).
你可以使用这个插件代替 html-loader github.com/bazilio91/ejs-compiled-loader :
{ 测试:/.ejs$/，使用:'ejs-compiled-loader' }更改 .ejs 和 HtmlWebpackPlugin 中的 .html 文件以指向正确的 .ejs 模板:
new HtmlWebpackPlugin({模板:'src/views/index.ejs'，文件名:'index.html',title: '家',块:['索引']})您可以在 .ejs 文件中导入部分、变量和资产:
src/views/partials/head.ejs:
<html lang="zh-cn"><头><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>src/js/ejs_variables.js:
const hello = '你好！';const bye = '再见！';出口{你好，再见}src/views/index.ejs:
<% 包含 src/views/partials/head.ejs %><身体><h2><%= require("../js/ejs_variables.js").hello %></h2><img src=<%= require("../../assets/sample_image.jpg") %>/><h2><%= require("../js/ejs_variables.js").bye %></h2>注意，当您包含部分路径时，路径必须相对于项目的根目录.
In the html-loader documentation there is this example
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?
I would like to do something like template-string-loader does:
var template = require("html?interpolate!./file.html")({data: '123'});
and then in file.html
<div>${scope.data}</div>
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.
Any ideas? Thank you
解决方案
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
}
}
}
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>
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.
Solution 2
Old answer
Not sure if this is the right solution for you but I'll share my workflow (tested in Webpack 3).
Instead of html-loader you can use this plugin github.com/bazilio91/ejs-compiled-loader :
{ test: /.ejs$/, use: 'ejs-compiled-loader' }
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']
})
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屋！
查看全文
