Gibt es eine Möglichkeit verfügen teilweise über html-webpack-plugin?

Bin ich mit dem Webpack zu kompilieren meine Skripte und HTML (mit html-webpack-plugin). Die Sache ist, ich habe 5 HTML-Dateien, enthält die gleichen Teile und ich mich bewegen will, diese Teile zu trennen .html Dateien und dann include diese Teile in jeder HTML-Datei. Auf diese Weise, wenn ich diese kleineren HTML-Dateien, wird es neu kompilieren jede HTML-Datei für die Darstellung dieser Veränderungen.

Webpack tut dies für .js-Dateien standardmäßig, aber kann ich so etwas wie, dass Sie für HTML-Dateien?

InformationsquelleAutor serge1peshcoff | 2017-02-12
  1. 23

    Können Sie <%= require('html!./partial.html') %> in Ihrer Vorlage. Beispiel hier: https://github.com/jantimon/html-webpack-plugin/blob/master/examples/custom-template/template.html

    • Wie kann man add-Vorlage spezifischen Variablen für jede Teillieferung?
    • Sie können tun, string Ersatz auf Sie <% var template = require('html!./partial.html')%> Nächste Zeile <%=template.replace('${someVar}', someVar)%> Ziemlich grobe Art und Weise, es zu tun, aber nicht finden können, eine einfachere Lösung jetzt.
    • Können Sie versuchen, mit - github.com/Vishal0203/file-include-webpack-plugin dies funktioniert ähnlich wie gulp-file-include
    • was loader ist erforderlich, um platziert werden webpack.config.js damit das funktioniert?
    InformationsquelleAutor mantastrunce
  2. 8

    Weitere etwas andere Lösung.

    Mit html-loader mit interpolate option.

    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-Seiten, die Sie importieren können partials html-und javascript-Variablen.

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

    html-variables.js sieht wie folgt aus:

    const hello = 'Hello!';
const bye = 'Bye!';

export {hello, bye}

    Der einzige Nachteil ist, dass Sie nicht importieren können andere Variablen aus HtmlWebpackPlugin wie diese <%= htmlWebpackPlugin.options.title %> (zumindest ich kann nicht einen Weg finden, um Sie zu importieren), aber für mich ist es kein Problem, schreiben Sie einfach den Titel Ihres html-oder verwenden Sie eine separate javascript-Datei für handle-Variablen.

    InformationsquelleAutor pldg
  3. 1

    Check-out Partials für HTML-Webpack-Plugin für etwas ein wenig mehr elegant. Es ermöglicht Ihnen das einrichten von HTML-Dateien, die beinhalten, ähnlich zu dem, was du bist suchen einfach wie:

    plugins: [
  new HtmlWebpackPlugin(),
  new HtmlWebpackPartialsPlugin({
    path: './path/to/partials/body.html'
  })
]

    Konfigurierbare, wo es wird Hinzugefügt, wie Kopf vs. Körper, öffnung vs schließen, und Sie können den pass in Variablen.

    • so müssen Sie explizit angeben, teilweise in der webpack-config-Datei, oder habe ich etwas übersehen? es ist mühselig, wenn Sie akready in index.html... Nein?
    • die Idee wäre, dass Sie würde nicht einmal mehr eine index.html Datei und können vermeiden, dass eine einzelne große Datei, die Referenz alles andere, was ein wenig mehr wartbar. es ist auch schwer (es sei denn, ich habe nicht gesehen, eine gute Lösung) zur Verwaltung von dynamischen Daten aus der index.html => inline-loader Teilstrom, der das löst
    • es tut nicht scheint elegant zu mir. Ich fühle mich einfach, um eine einzelne Datei, welches handeln als layout-Vorlage, wo Sie können die position eines jeden teilweise in der Art der Winkel macht mit seiner Komponenten-Architektur. nach diesem Schritt werden die Daten Hinzugefügt werden könnten als json\yaml-Datei, aus dem Teiltöne Lesen mit einer template-engine wie Schnurrbart\esj. Diese Lösung fügen Sie einfach teiltönen zusammen, es ist nicht das, was gefragt wurde. (das "verlangen", in html eingebettete scheint mehr so, wie der ursprüngliche Fragesteller benötigt)
    • was du sagst ist nicht, was Sie Fragen, aber, bist du damit sagen, dass es eine index.html und das ist nicht der Fall. haben Sie mehrere html-Dateien, die Sie einbeziehen möchten jeden Teil, wo die Lösung, die Sie drängen müssten Sie darunter, dass in jeder Datei. während dies funktioniert, es erfordert die Aufrechterhaltung jeder in jeder Datei. zusätzlich, Sie hätte nicht Spaß daran, zu tun, alle lokalen Variablen übergabe mit, dass die Lösung, wenn es eine Anforderung. egal, beide Lösungen funktionieren und es ist ein bisschen persönliche Vorliebe im Spiel ist hier das Ziel war, eine weitere option 🙂
    InformationsquelleAutor Colby
Schreibe einen Kommentar