Webpack einfach kompilieren eine Reihe von Mops-Vorlagen in HTML

Im erste Schritte mit webpack aber eine Sache kann ich nicht für das Leben von mir zu erarbeiten, ist wie man einen Ordner (mit der Möglichkeit der verschachtelten Ordner), voller .Mops Vorlagen, und einfach compilieren zu statischem html und setzen Sie Sie in die Ausgabe-Ordner, die Aufrechterhaltung einer verschachtelten Ordner-Struktur für jede Ausgabe-html-Datei wurde in der Quelle Ordner "Vorlagen"...

Möchte ich nicht haben, um manuell eingeben jedes einzelnen .Mops-Datei, und ich definitiv nicht wollen, webpack, um zu versuchen und zu analysieren .Möpse in JS und dann versuchen, zu verlangen/import jedes der imgs/fonts etc in der Mops-Dateien und beschweren sich dann darüber, ich bin nur nach einer grundlegenden, statischen 1:1 kompilieren, Mops-Datei, html-Datei aus. Warum ist es so schwer, das zu tun?

  • es ist möglich, mit webpack, aber es ist einfacher zu verwenden gulp wenn Sie nicht hauptsächlich im Umgang mit js-Dateien
  • id lieber nicht hinzufügen schlucken und Ihre Abhängigkeiten in jedes Projekt als gut... Sie sagen, es ist möglich, mit webpack, könnten Sie das näher erläutern?
  • zeigen Sie Ihre bestehenden webpack config. Sie können function requireAll (r) { r.keys().forEach(r); } requireAll(require.context('./src', true, /\.pug$/)); zu verlangen, dass jedes .Mops-Dateien unter src-Ordner und konfigurieren file-loader zu tun, die Kopie
  • ich habe nicht zu verwenden, extrahieren von text plugin dort irgendwo?
  • wie unterstützt extrahieren von text-plugin in Bezug auf Ihre Frage überhaupt?
  • Heres eine Zusammenfassung meiner config: webpack config gist link
  • ich möchte zum speichern von statischen html-Dateien aus jeder pug-Datei, ich dachte, das extrahieren von text-plugin war die Art und Weise, dies zu tun? genauso wie du den text extrahieren plugin zu speichern .css-Dateien aus dem sass-loader, dont, das Sie verwenden, extrahieren von text zu speichern .html-Dateien von Mops-loader?

InformationsquelleAutor Matthew Prasinov | 2017-02-19
  1. 11

    Verwenden pug-html-loader zu konvertieren .Mops zu .html-Datei. Verwenden file-loader kopieren Sie die Datei an die gewünschte Position. Verwenden Sie nicht html-loader wie Sie nicht wollen und dabei Ressourcen verwendet, die von der generierten Datei.

    Werden Sie am Ende so etwas wie dies in Ihrer loader Regeln (ungetestet, webpack 1 syntax ist, müssen Sie möglicherweise zu zwicken es für webpack 2)

    {
    test: /\.pug$/,
    loaders: ['file-loader?name=[path][name].html', 'pug-html-loader?pretty&exports=false']
}

    Als Nächstes müssen Sie alle Ihre Mops-Dateien in Ihrer Eingabe-Datei

    function requireAll (r) { r.keys().forEach(r); }
requireAll(require.context('./', true, /\.pug$/));
    • Ok wow, das funktioniert! Danke.
    • Ich habe eine andere Frage - sagen, dass ich dieses require.context('./pug/', true, /\.pug$/) so seine sucht in den Mops-Ordner, aktuell wenn ich die Datei-loader mit der name=[path][name].html query-parameter, die Vorlagen werden immer in einem Mops-Ordner in meinem build-directory. wenn zB eine bestimmte Quelle Mops Vorlage lebt in /pug/home/template.pug ich am Ende mit /dist/pug/home/template.html, aber ich möchte es dist/home/template.html gibt es eine Möglichkeit zu kontrollieren, was [Pfad] wird die Ausgabe in die Datei-loader query-string?
    • versuchen file-loader?name=[path][name].html&context=./pug ist, müssen Sie möglicherweise ändern Sie den Kontext-parameter, damit es funktioniert
    • Vielen Dank noch einmal! Das funktionierte perfekt 🙂
    • Bin wieder zurück, wieder mit etwas anderem an - mit dieser Methode in meiner main bundle.js ich habe jetzt eine Reihe von Einträgen, die für den Mops-Dateien, auch wenn Sie nicht brauchen, um in es - z.B. (function(module, exports, __webpack_require__) { module.exports = __webpack_require__.p + "layouts/default.html"; /***/ }) wie Schaffe ich diese?
    • Sie können die requireAll Aufruf einen neuen Eintrag " Datei-und ignorieren die js-Ausgabe von es
    • Ihr habe ich einen separaten Eintrag " Datei für den Mops Zeug, wie kann ich ignorieren Sie die Ausgabe den Eintrag Datei in der webpack.config.js?
    • man kann nicht wirklich ignorieren, es mit webpack, aber Sie können es Ausgabedatei zu einigen ignoriert Ordner oder einen extra Schritt, um entfernen Sie die Datei. aber das wird nicht drin sein webpack
    • aus Neugier, wenn ich den ExtractTextPlugin für meine scss/sass-Dateien, obwohl ich meine Haupt scss-Datei als einen Eintrag zeigen, wird keine Ausgabe-Bündel, die generiert wird... so scheint es, dass plugins nehmen können die Einstiegspunkte und nicht emittieren ein bundle für alle Einfuhren/erfordert, dass es passen? gibt es vielleicht eine Art null-plugin, das ich benutzen kann, um zu stoppen webpack emitting eine bundle-Datei, die für den Mops benötigt?
    • Es ist möglich, aber ich habe nie nichts wie zuvor. Sie können eine neue Frage und vielleicht kann jemand anders helfen.
    • danke, ja ich gebeten, eine neue Frage. auch im ein idiot - das extrahieren von text-plugin war die Ausgabe von einem bundle.css :/
    • tut mir Leid, Sie zu stören wieder, ich habe eine andere Frage, die mit der Mops - Vorlagen- Im Versuch zum bestehen der webpack-hash in der Mops-Vorlagen, so kann es verwendet werden script(src="bunde.${HASH}.js") etc... habe ich eine eigene Frage hier gepostet aber die hat keine Kommentare für Alter, irgendwelche Ratschläge?

    InformationsquelleAutor Bryan Chen
Schreibe einen Kommentar