webentwicklung-frage-antwort-db.com.de

Wie kann ich Parameter für die Interpolation von Webpack-HTML-Loadern bereitstellen?

In der html-loader Dokumentation gibt es dieses Beispiel

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>

Woher kommt "Liste"? Wie kann ich Parameter für den Interpolationsbereich bereitstellen?

Ich würde gerne etwas machen wie template-string-loader macht:

var template = require("html?interpolate!./file.html")({data: '123'});

und dann in file.html

<div>${scope.data}</div>

Aber es geht nicht. Ich habe versucht, den Template-String-Loader mit dem HTML-Loader zu mischen, aber es funktioniert nicht. Ich konnte nur den Template-String-Loader verwenden, aber dann werden die Bilder im HTML nicht durch das Webpack transformiert.

Irgendwelche Ideen? Vielen Dank

webpackwebpack-html-loader
13
Patrick Lafrance

Lösung 1

Ich habe eine andere Lösung gefunden, indem ich html-loader mit der Option interpolate verwendet habe.

https://github.com/webpack-contrib/html-loader#interpolation

{ test: /\.(html)$/,
  include: path.join(__dirname, 'src/views'),
  use: {
    loader: 'html-loader',
    options: {
      interpolate: true
    }
  }
}

Und dann in HTML-Seite können Sie Teil-HTML- und Javascript-Variablen importieren.

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

Der einzige Nachteil ist, dass Sie keine anderen Variablen aus HtmlWebpackPlugin wie diesem <%= htmlWebpackPlugin.options.title %> importieren können (zumindest kann ich keinen Weg finden, sie zu importieren), aber für mich ist es kein Problem, schreiben Sie einfach den Titel in Ihr HTML oder verwenden Sie einen separaten Javascript-Datei für Handle-Variablen.

Lösung 2

Alte Antwort

Ich bin nicht sicher, ob dies die richtige Lösung für Sie ist, teile aber meinen Workflow (getestet in Webpack 3).

Anstelle von html-loader kannst du dieses Plugin verwenden github.com/bazilio91/ejs-compiled-loader :

{ test: /\.ejs$/, use: 'ejs-compiled-loader' }

Ändern Sie Ihre .html-Dateien in .ejs und Ihre HtmlWebpackPlugin so, dass sie auf die richtige .ejs-Vorlage zeigen:

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

Sie können Partials, Variablen und Assets in .ejs-Dateien importieren:

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>

Ein Hinweis: Wenn Sie einen Teil einschließen, muss der Pfad relativ zum Stammverzeichnis Ihres Projekts sein.

4
pldg

Schnurrbart-Lader hat die Arbeit für mich erledigt:

var html = require('mustache-loader!html-loader?interpolate!./index.html')({foo:'bar'});

Dann können Sie in Ihrer Vorlage {{foo}} verwenden und sogar andere Vorlagen einfügen

<h1>{{foo}}</h1>
${require('mustache-loader!html-loader?interpolate!./partial.html')({foo2: 'bar2'})}
1
Quentin Vansteene

wenn Sie teilweise die Template-Engine von htmlWebpackPlugin verwenden, können Sie Folgendes verwenden:

  <!-- index.html -->
  <body>
    <div id="app"></div>
    <%= require('ejs-loader!./partial.gtm.html')({ htmlWebpackPlugin }) %>
  </body>

  <!-- partial.gtm.html -->
  <% if (GTM_TOKEN) { %>
  <noscript>
    <iframe
      src="https://www.googletagmanager.com/ns.html?id=<%= GTM_TOKEN %>"
      height="0"
      width="0"
      style="display:none;visibility:hidden"
    ></iframe>
  </noscript>
  <% } %>

  // webpack.config.json
  {
    plugins: [
      new webpack.DefinePlugin({
        GTM_TOKEN: process.env.GTM_TOKEN,
      }),
    ],
  }

brauchen npm i ejs-loader

0
Nermo

Sie könnten lachen, aber mit den mit HTMLWebpackPlugin bereitgestellten Standardladern können Sie Zeichenfolgen für die HTML-Teildatei ersetzen.

  1. index.html ist ejs template (ejs ist das Standardladeprogramm in HTMLWebpackPlugin)
  2. file.html ist nur eine HTML-Zeichenkette (geladen über HTML-Loader auch standardmäßig mit HTMLWebpackPlugin verfügbar oder kommt es vielleicht mit Webpack?)

Konfiguration

Verwenden Sie einfach das in HTMLWebpackPlugin bereitgestellte Standard-EJS-Template

new HtmlWebpackPlugin({
    template: 'src/views/index.ejs',
    filename: 'index.html',
    title: 'Home',
    chunks: ['index'],
    templateParameters(compilation, assets, options) {
        return {
            foo: 'bar'
        }
    }
})

Hier ist meine Top-Level-EJS-Datei

// index.html 

<html lang="en" dir="ltr">
    <head>
        <title><%=foo%></title>
    </head>
    <body>
        <%
            var template = require("html-loader!./file.html");
        %>
        <%= template.replace('${foo}',foo); %>
    </body>
</html>

Hier ist die Datei file.html, die html-loader als Zeichenfolge exportiert.

// file.html 

<h1>${foo}</h1>
0
potench