webpack - 如何为webpack html-loader插值提供参数？-6ren

webpack - 如何为webpack html-loader插值提供参数？

转载作者：行者123 更新时间：2023-12-03 11:01:48

在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>

但这是行不通的。我尝试将template-string-loader与html-loader混合使用，但它不起作用。我只能使用template-string-loader，但是HTML中的图像不会被webpack转换。

有任何想法吗？谢谢

最佳答案

解决方案1

我找到了另一个解决方案，将html-loader与interpolate选项结合使用。

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' }

更改 .html中的 .ejs文件和 HtmlWebpackPlugin，使其指向正确的 .ejs模板:

new HtmlWebpackPlugin({
    template: 'src/views/index.ejs',
    filename: 'index.html',
    title: 'Home',
    chunks: ['index']
})

您可以在 .ejs文件中导入部分，变量和 Assets :
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>

注意，当您包含部分路径时，路径必须相对于项目的根目录。

关于webpack - 如何为webpack html-loader插值提供参数？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39374187/