webentwicklung-frage-antwort-db.com.de

Wie bündige ich eine Bibliothek mit Webpack?

Ich möchte eine Frontend-Bibliothek anlegen ..__ Deshalb möchte ich Webpack verwenden. Besonders gut gefällt mir der css und der image loader ..__ Ich kann jedoch nur Nicht-JS-Dateien benötigen, wenn ich webpack .

Gibt es eine Möglichkeit, alles in einem UMD-Modul zu bündeln, um es zu veröffentlichen? Ich habe versucht, mehrere Einstiegspunkte zu verwenden, jedoch kann ich das Modul dann nicht benötigen.

Danke im Voraus

javascriptwebpackumd
13
Arwed Mett

Eine gute Anleitung zum Erstellen von Bibliotheken finden Sie in Webpack 2.0 Dokumentationssite . Deshalb verwende ich für dieses Beispiel die Syntax von ver 2 in webpack.config.js.

Hier ist ein Github Repo mit einer Beispielbibliothek.

Es baut alle Dateien aus src/ (js, png und css) in ein JS-Bundle zusammen, das einfach als umd-Modul benötigt werden kann.

dazu müssen wir die folgenden Einstellungen in webpack.config.js angeben:

output: {
    path: './dist',
    filename: 'libpack.js',
    library: 'libpack',
    libraryTarget:'umd'
},

und package.json sollte haben:

"main": "dist/libpack.js",

Beachten Sie, dass Sie geeignete Ladeprogramme verwenden müssen, um alles in eine Datei zu packen. z.B. base64-image-loader statt file-loader

12
Oleg Pro

Der Kommentar von @OlegPro ist sehr hilfreich. Ich empfehle jedem, diesen Artikel zu lesen und zu erklären, wie diese Dinge funktionieren

http://krasimirtsonev.com/blog/article/javascript-library-starter-using-webpack-es6

Sie benötigen Folgendes, wenn Sie die Bundle-Datei in Ihr Projekt importieren möchten

  output: {
    path: path.resolve(__dirname, myLibrary),
    filename: 'bundle.js',
    library: "myLibrary",   // Important
    libraryTarget: 'umd',   // Important
    umdNamedDefine: true   // Important
  },
0
xeiton