Einrichtung von Webpack und Babel

Webpack ist ein Bundler mit dem Hauptzweck, JavaScript-Dateien für die Nutzung im Browser zusammenzuführen (Webpack kann aber beispielsweise auch SASS in CSS kompilieren). Hier zeige ich die Einrichtung von Webpack und Babel – einem Tool, das ES6-JavaScript-Code in ES5-kompatiblen Code umwandeln kann.

Nachdem ich vor einigen Tagen bereits vergeblich versucht habe, die Kombination aus Webpack und Babel zum Laufen zu bekommen, hat es heute erstaunlich schnell funktioniert (man muss einfach nur den verschiedenen Anleitungen der Webpack-Doku folgen 😀 ). Das kleine Tutorial geht davon aus, dass bereits eine package.json für das Projekt vorhanden ist.

Um Webpack zu installieren, führt den folgenden Code im Projektverzeichnis aus:

npm install --save-dev webpack
Code-Sprache: Bash (bash)

Zur Installation von Babel ist der folgende Befehl notwendig:

npm install --save-dev babel-loader babel-core babel-preset-env
Code-Sprache: Bash (bash)

Jetzt müssen wir eine webpack.config.js zur Konfiguration von Webpack erstellen. In unserem Beispiel sieht sie so aus:

const path = require('path');

module.exports = {
	entry: './assets/js/src/functions.js',
	output: {
		filename: 'bundle.js',
		path: path.resolve(__dirname, 'assets/js')
	},
	module: {
		rules: [
			{
				test: /.js$/,
				exclude: /node_modules/,
				use: {
					loader: 'babel-loader',
					options: {
						presets: ['env']
					}
				}
			}
		]
	}
};
Code-Sprache: JavaScript (javascript)

Zunächst legen wir mit entry die Datei fest, die von Webpack behandelt werden soll, und mit output die Ausgabedatei. Das war die Grundkonfiguration von Webpack, der module-Teil betrifft die Einrichtung von Babel.

Über module.rules legen wir Babel als Webpack-Loader fest. Der soll für alle JavaScript-Dateien gelten, ausgenommen das Verzeichnis node_modules. Als Loader nutzen wir das installierte babel-loader mit dem Preset env.

Um Webpack leichter ausführen zu können, nutzen wir nicht dessen CLI sondern NPM-Skripte. Der entsprechende Part aus der package.json sieht bei mir wie folgt aus:

"scripts": {
	"watch": "webpack --watch",
	"production": "webpack -p",
	"build": "webpack"
},
Code-Sprache: JavaScript (javascript)

Über npm run watch können wir nun beispielsweise webpack --watch ausführen und dadurch Webpack starten und auf Änderungen horchen lassen, sodass es Dateiänderungen sofort automatisch berücksichtigt. Der webpack -p-Befehl ist für die Produktion gedacht – er minifiziert die Ausgabe, startet das LoaderOptionsPlugin (das in einer späteren Version von Webpack entfernt werden wird) und setzt die NodeJS-Umgebungsvariable, damit bestimmte Pakete anders kompilieren.

Nutzt ihr Webpack? Und falls ja, für was alles?