Wie man Templating mit Webpack und HTML Webpack Text Plugin umgehen?

Question

Ich habe ein Projekt, das Twig für Templating verwendet. Alle darin enthaltenen Daten sind statisch, aber ich habe aus Gründen der Übersichtlichkeit Teile der Seite in anderen Zweigdateien getrennt (sonst würde es Hunderte von Markup-Zeilen in einer Datei geben).

Ich benutze Webpack als Build-Tool, zusammen mit HTML Webpack Plugin.

Zum Beispiel lassen Sie uns sagen, ich habe folgendes:

views/index.html

<h1>This is my main index page</h1>  
{% includes './welcome/hello.html' %} 

views/willkommen/hello.html

<p>Hello from the templated page.</p> 

Jetzt, wo Ich möchte Webpack verwenden, um js, css zu bündeln und HTML-Webpack-Plugin zu verwenden, um eine HTML-Seite zu erstellen und diese Stile und Skripte in injizieren:

dist/index.html 
dist/bundle.js 
dist/styles.css 

In meinem dist/index.html, erwartete ich, so etwas zu bekommen, wo die HTML-Seite erzeugt wird, wie HTML gezeigt:

dist/index.html

<h1>This is my main index page</h1> 
<p>Hello from the templated page.</p> 

aber was ich bin immer so etwas wie das ist, wo es nach wie vor zeigt meine ‚enthält‘ Templat:

dist/index.html

<h1>This is my main index page</h1> 
{% includes './welcome/hello.html' %} 

Wenn es nicht möglich ist, die Vorlagen zu erstellen, ist es möglich, Html Webpack Plugin zu verwenden, um alle Vorlagen zu kopieren über (gesamtes Verzeichnis aller Vorlagendateien auf /dist, damit sie ihre Pfade beibehalten)?

Danke!

Answer 1

Sie können ejs-render-loader verwenden. see package.

// webpack 
     new HtmlWebpackPlugin({ 
       filename: 'a.html', 
       hash: true, 
       template: 'ejs-render?a.ejs', 
     }) 
// a.ejs 
    <%- include components/menu -%> 

// components/menu.ejs 
    <p>hei hei hei hei</p> 

Ich glaube, Sie Ihre .html zu .ejs Datei ändern können. Und benutze das Plugin wie oben.