Was genau soll ich tun mit "module.exports = 'html_template_content'" auf webpack

Question

Also ich möchte eine sehr einfache Aufgabe mit Webpack machen.

Ich habe ein paar statische HTML-Vorlagen wie z.

test.html

<div><span>template content</span></div> 

und alles, was ich tun möchte, ist die Zeichenfolge in der Vorlage zurückkehren zB

require("raw!./test.html") 

mit sollte einen String zurück wie:

"<div><span>template content</span></div>" 

Stattdessen gibt es die folgende Zeichenfolge

zurück

"modules.exports = <div><span>template content</span></div>" 

Ich habe mehrere Module ausprobiert, wie den raw-loader und html-loader. und sie beide verhalten sich auf die gleiche Weise.So sah ich mir den Quellcode, nur um herauszufinden, dass es sich um so verhalten.

so was genau bin ich damit zu tun zu erwarten, wenn ich will nur die rohe HTML? Ist es eine schlechte Übung, nur die vorangestellte "module.exports =" Zeichenfolge zu entfernen? aus dem Bündel bearbeiten: Entfernen der Teilergebnisse ‚modules.export =‘ im Bündel nichts Rückkehr:/

meine Config

module.exports = 
{ 
    module: 
    { 
     loaders: 
      [ 
       { test: /\.html$/, loader: "raw-loader" } 
      ] 
    } 
}; 

Answer 1

fand ich eine schmutzige Abhilfe eval

console.log(eval(require("raw!./test.html"))); 

es in der Tat gibt die HTML-Vorlage, aber ich werde diese Lösung verlassen bis zu diskutieren, bis wir ein besseres gefunden habe.

Answer 2

Wenn Sie require('./test.html') schreiben bedeutet es, dass Sie einfach den Code ausführen zurückgegeben von der Ladekette. Das Ergebnis wird in diesem Code als module.exports exportiert. Um dieses Ergebnis verwenden Sie müssen ordnen Sie benötigen Anweisung Variable:

var htmlString = require('raw!./test.html'); 
//htmlString === "<div><span>template content</span></div>" 

Denken Sie daran, dass jeder Lader in Webpack gibt JS-Code - nicht HTML, CSS nicht. Sie können diesen Code verwenden, um HTML, CSS und was auch immer zu erhalten.

Answer 3

Die Lösung ist Ihre Datei benötigen, ohne zusätzliche Lader Angabe, wie dies bereits in der webpack Config

const test = require('./test.html') 

Erklärung angegeben wird: Mit Ihrem aktuellen Code, bewerben Sie sich die raw loader zweimal zu Ihrer Datei . Wenn Sie in Ihrer Konfiguration eine Ladeprogrammkette angeben:

loaders: 
    [ 
     { test: /\.html$/, loader: "raw-loader" } 
    ] 

...Sie sind bereits webpack erzählt diese Lader an den Lader Kette Sie jedes Mal, erfordern Anpassung der test Zustand einer Datei hinzufügen (hier jede HTML-Datei)

Deshalb, wenn Sie dieses

const test = require('raw!./test.html') 

schreiben ... es ist tatsächlich äquivalent zu diesem

const test = require('raw!raw!./test.html')