Webpack-Plugin zum Anhängen eines statischen JSON-Objekts an Ausgabe

Question

Ich versuche ein Webpack-Plugin zu schreiben, das in ein Verzeichnis mit HTML-Dateien geht, jedes öffnet, neue Zeilen entfernt und ein Objekt erzeugt, das als statische Eigenschaft an meine Ausgabe angehängt wird Datei (die eine Var ist).

Das Objekt würde in etwa so aussehen:

{ 
    htmlFile1: '<p>some html one!</p>', 
    htmlFile2: '<span>some html two!</span> 
} 

Dann würde Ich mag es meine Ausgabe wie angebracht werden:

App.templates = { .... } 

Die Erstellung des Objekts erfolgt. Ich kämpfe gerade mit Webpack und finde heraus, wie man es an das Hauptobjekt anbringt. Sollte ich es einfach auf die Festplatte schreiben und es benötigen? Oder gibt es eine Möglichkeit, es über das Plugin zum Bundle hinzuzufügen?

Ich benutze Rivets.js als Vorlage-Engine und ich konnte nichts finden, das so etwas schon tut.

Auch erwähnenswert, alles was ich benutze ist Webpack und Npm. Nein Grunt/Gulp/etc

Vielen Dank! Mike

Answer 1

Sie webpack die verwenden könnte require.context alle HTML-Dateien in einem Verzeichnis als Text zu importieren, verarbeiten Sie den Text, und exportieren Sie die Ergebnisse als ein einzelnes Objekt:

const requireTemplate = require.context('./templates', false, /\.html$/); 

module.exports = requireTemplate.keys().reduce((templateMap, templatePath) => { 
    const templateName = templatePath.match(/\/(\w*?)\.html/)[1]; // get filename without path and extention 
    templateMap[templateName] = require(templatePath); 
    return templateMap; 
}, {});