(Webpack) Mit dem url-loader-Datei-loader, muss ich wirklich gehören ein require() in meine .js für jedes statische Bild, das ich aufnehmen wollen?

Ich bin immer noch lernen, webpack, und ich hatte Mühe, Bilder zu zeigen, bis in meine Produktion zu bauen, bis ich stolperte über einige code, der bereits eine require('path/to/image.png') an der Spitze ein .js-Datei. Also ich habe es versucht und siehe da es funktioniert.

Dies scheint wackelig zu mir. Muss ich wirklich eine dieser für jedes statische Bild, das ich brauchen, um zu dienen? Gibt es einen besseren Weg, dies zu tun? Das wird chaotisch, wenn nicht.

InformationsquelleAutor Anj | 2016-06-13
  1. 6

    Gibt es Lader wie css-loader und url-loader dem auflösen von urls in base64-inline-Daten-strings statt mit der statischen asset.

    Können Sie sehen,diesen Super guide, wie die Umsetzung mit url-loader. Wenn Sie Probleme Sie müssen sicherstellen, dass Sie den richtigen relativen Pfad.

    './path/to/image.png'

    • Ich bin mir bewusst, diese Lader, die Sie erwähnen, und bin schon mit beiden. Manchmal ist es nicht sinnvoll, die base64-Kodierung der Bilder aber, und in jedem Fall glaube ich, haben Sie immer noch require('path/to/image.png') das ist, was ich wirklich bin, zu Fragen. Gibt es eine Möglichkeit, meine Bilder einfach durch Bezugnahme auf Sie in der html -, anstatt zu verlangen, daß Sie in meinem js?
    • Wenn Sie die limit Abfrage für url-loader es werden nur online-Bilder, die die angegebenen asset-Größe. Wenn es größer ist, dann file-loader automatisch ausgeben, dass die Datei mit Ihrem Bündel für Sie.
    • Ja, ich weiß, dass als gut, aber dies nicht wirklich meine Frage beantworten. Ich möchte wissen, ob es eine Möglichkeit gibt, kann ich umgehen, das muss require('path/to/image.png') in meine javascript-Datei. Ich weiß nicht, wie ich könnte mehr klar, dass dies ist, was ich verlange.
    • Sie haben html-loader in deiner config? Sie müssen nicht require() alle html -, aber es gibt zusätzliche Auflösung Funktionen mit url-loader. Lassen Sie mich wissen, ob das funktioniert.
    • Um die Frage zu beantworten, du bist tatsächlich zu Fragen, Nein, Sie können nicht schließen Sie das Bild ohne Sie zu importieren in irgendeiner Weise in dein javascript, ob es mit require() oder es6 Einfuhren.
    • Nicht sicher über das webpack 1, aber die url-loader im webpack 2 nicht erfordern den Einsatz von require(). Es funktioniert, indem Sie einfach den richtigen Pfad syntax wie Sean bereits erwähnte. Es funktioniert für mich, und ich bin definitiv nicht mit require() für Bilder.

    InformationsquelleAutor Sean Larkin
  2. 6

    Können Sie die CopyWebpackPlugin zu bewegen src Dateien in einen Ordner "assets", die beim erstellen des webpack Projekt.

    Details in dieser Antwort: https://stackoverflow.com/a/33374807/492976

    • Wenn Sie dieses plugin dann wie Sie, fügen Sie einen hash-code, um Ihr Vermögen? Wenn Sie don ' T haben Sie Probleme mit der browser nicht aktualisiert, den cache bereitgestellt.
    InformationsquelleAutor charliesneath
Schreibe einen Kommentar