Skip to main content

Webpack

Was bedeutet Webpack?>>>>>>>>>>>>>>>>>>>>>>>>>>

Bei Webpack handelt es sich um einen sogenannten „Codebundler“, der in erster Linie eingesetzt wird, um verschiedene JavaScript-Dateien für den Einsatz im Browser zusammenzuführen.

Code-Splitting und JavaScript

Die Laufzeitumgebung NodeJS, in deren Rahmen JavaScript serverseitig eingesetzt werden kann, hat von Anfang an die Aufteilung von JavaScript-Code in Module mittels CommonJS unterstützt. CommonJS ermöglicht es, Code in abhängige Module aufzuteilen und diese bei Bedarf unabhängig voneinander zu laden. Die Aufteilung in unabhängige Module und Code-Splitting wird vor allem wegen besserer Überschaubarkeit und einer einfacheren Verwaltung von Programmcode gemacht. Dabei handelt es sich um eine gängige Ingenieurpraxis, die schon seit Jahrzehnten in verschiedenen Programmiersprachen wie Java, C++ oder Python eingesetzt wird. Egal in welchem Webbrowser JavaScript eingesetzt wird, bietet die Skriptsprache keine Unterstützung für Code-Splitting.

Module für den Webbrowser

An dieser Stelle kommt Webpack ins Spiel. Der Codebundler bietet Unterstützung für das Code-Splitting im Webbrowser, indem es unabhängige Module bei Bedarf lädt, als wären sie für den Einsatz in einer NodeJS-Umgebung vorgesehen. Der modularisierte Code wird vom Codebundler zunächst analysiert und verarbeitet, danach wird daraus ein Paket kreiert, das bei Bedarf jederzeit dynamisch geladen werden kann. Darüber hinaus erlaubt uns der Bundler npm-Pakete als Module zu nutzen, wie beispielsweise jQuery oder React. Diese müssen dann nicht als einzelne Skripts in das HTML-Dokument eingebettet werden, was zahlreiche Vorteile mit sich bringt, wie zum Beispiel:

  • keine globalen Variablen
  • kein Outscoping
  • der Code wird viel überschaubarer und berechenbarer

Konfiguration von Webpack

Die Konfiguration ist in Form eines NodeJS-Moduls realisiert, das ein sogenanntes „Config-Objekt“ exportiert. Es kann jeden beliebigen JavaScript-Code enthalten, was Entwicklern eine Vielzahl unterschiedlicher Möglichkeiten eröffnet. So kann man beispielsweise eine Input-Datei für den Codebundler dynamisch nach Bedarf vom Filesystem laden. Das Konfigurationsobjekt inkludiert vier wichtige Stichwörter:

Entry

Hierbei handelt es sich um die Input-Settings. Damit können Entwickler dem Codebundler genaue Anweisungen geben, an welcher Stelle mit dem Anfertigen von Packages begonnen werden soll. Beispiel einer Entry-Config:

/module.exports={
/context:path.resolve(__dirname),
/entry:‘./index.js‘,
/entry: [‚./index.js‘, ‚./login.js‘],
/entry: {
/index: ‚./index.js‘,
/login: ‚./login.js‘,
/},
/}

Output

Bei diesem handelt es sich um ein Objekt mit Keys, mit dem der Output von Webpack geregelt wird. Beispiel für Output-Config:

/module.exports={
/context:path.resolve(__dirname),
/entry:‘./index.js‘,
/entry: [‚./index.js‘, ‚./login.js‘],
/entry: {
/index: ‚./index.js‘,
/login: ‚./login.js‘,
/},
/output:{
/path:path.join(__dirname,’build‘),
/publicPath:’/‘,
/filename:’bundle.js‘,
/filename: ‚[name].js‘,
/filename: ‚[chunkhash].js‘,
/}
/}

Loader

Hierbei handelt es sich um Transformationen, mit denen sich die Konfiguration einzelner Module anpassen lässt, noch bevor diese zum Package zusammengestellt werden. Beispiel für die Verwendung eines Loaders:

/module.exports={
/module:{
/rules:[
/{
/test:/.js$/
/use:[
/{
/loader:’babel-loader‘,
/options:{
/presets:[‚react‘]
/}
/}
/]
/},
/{
/test:/.sass$/,
/use:[
/{
/loader:’style-loader‘,
/},
/{
/loader:’css-loader‘,
/},
/{
/loader:’sass-loader‘,
/}
/]
/}
/]
/}
/}

Plug-ins

Bei den Plug-ins handelt es sich um Transformationen, die pro Paket angewandt werden. Sie werden beispielsweise für Funktionalitäten eingesetzt, die vom Loader nicht unterstützt werden. Beispiel für eine Plug-In-Config:

/module.exports={
/plugins:[
/newExtractTextPlugin({
/name:’bundle.css‘
/}),
/newwebpack.optimize.UglifyJsPlugin({
/minimize:true
/}),
/]
/}

Fazit des OM Optimiser Teams

Webpack ist ein Codebundler, der die Modularisierung von Programmcode auf Frontend-Ebene ermöglicht, was zu einer besseren Überschaubarkeit und einer einfacheren Verwaltung von Programmcode beiträgt.

Sie haben noch Fragen?

Kontaktieren Sie uns


Weitere Inhalte