Webpack: SASS bei mehreren Entry-Points in eigene Datei kompilieren

Webpack kann mit mehreren Entry-Points genutzt werden, um zum Beispiel mehrere JavaScript-Dateien mit Babel zu kompilieren. Hier zeige ich, wie sich die Kompilierung von SASS-Dateien in eigene CSS-Dateien bei mehreren Entry-Points umsetzen lässt.

Das Problem

Bisher hatte ich als entry in der Webpack-Config zum Beispiel soetwas:

entry: ['./assets/src/js/functions.js', './assets/src/scss/frontend.scss', './assets/src/scss/editor.scss'],
Code-Sprache: JavaScript (javascript)

Über die Nutzung verschiedener Loader konnte ich mir daraus eine mit Babel kompilierte functions.js sowie die CSS-Dateien frontend.css und editor.css erstellen lassen. Nun wollte ich aber eine zweite JavaScript-Datei als Entry-Point angeben, deren Kompilierungsergebnis ich als zweite JavaScript-Datei neben der functions.js haben sollte. In der Webpack-Dokumentation zu Entry-Points wird gezeigt, wie mehrere Entry-Points angelegt werden können, und so sah mein erster Versuch aus:

entry: {
	functions: './assets/src/js/functions.js',
	glide: './assets/src/js/glide.js',
	frontend: './assets/src/scss/frontend.scss',
	editor: './assets/src/scss/editor.scss',
},
Code-Sprache: JavaScript (javascript)

Das hat nur so halb funktioniert. Ich habe zu jeder kompilierten CSS-Datei auch noch eine JavaScript-Datei gleichen Namens erhalten. Theoretisch könnte ich die natürlich einfach ignorieren, aber letztlich ist es doch nicht wirklich zufriedenstellend.

Die Lösung

Die Lösung des Problems ist im Nachhinein relativ einfach: die beiden SASS-Dateien werden wieder zusammen mit einer der JavaScript-Dateien in ein Array gepackt, und so bekomme ich das gewünschte Ergebnis von zwei JavaScript- und zwei CSS-Dateien.

entry: {
	functions: ['./assets/src/js/functions.js', './assets/src/scss/frontend.scss', './assets/src/scss/editor.scss'],
	glide: './assets/src/js/glide.js',
},
Code-Sprache: JavaScript (javascript)

So kann eine Konfigurationsdatei für Webpack 4 mit dieser Lösung aussehen:

const path = require('path');

module.exports = {
	mode: 'development',
	entry: {
		functions: ['./assets/src/js/functions.js', './assets/src/scss/frontend.scss', './assets/src/scss/editor.scss'],
		glide: './assets/src/js/glide.js',
	},
	output: {
		path: path.resolve(__dirname, 'assets'),
		filename: 'dist/js/[name].js',
	},
	module: {
		rules: [
			/**
			 * Running Babel on JS files.
			 */
			{
				test: /\.js$/,
				exclude: /node_modules/,
				use: {
					loader: 'babel-loader',
					options: {
						plugins: ['lodash'],
						presets: ['@wordpress/default']
					}
				}
			},
			{
				test: /\.scss$/,
				use: [
					{
						loader: 'file-loader',
						options: {
							name: 'dist/css/[name].css',
						}
					},
					{
						loader: 'extract-loader'
					},
					{
						loader: 'css-loader?-url'
					},
					{
						loader: 'postcss-loader'
					},
					{
						loader: 'sass-loader'
					}
				]
			}
		]
	},
};
Code-Sprache: JavaScript (javascript)

Das hier sind meine devDependencies aus der package.json (mehr als für dieses Beispiel gebraucht werden):

"devDependencies": {
  "@wordpress/babel-preset-default": "^1.3.0",
  "autoprefixer": "^8.5.0",
  "babel-core": "^6.26.0",
  "babel-loader": "^7.1.2",
  "babel-preset-env": "^1.6.0",
  "css-loader": "^0.28.7",
  "extract-loader": "^2.0.1",
  "file-loader": "^1.1.11",
  "lodash-webpack-plugin": "^0.11.5",
  "node-sass": "^4.9.0",
  "postcss-cli": "^5.0.0",
  "postcss-loader": "^2.0.6",
  "sass-loader": "^7.0.1",
  "svg-spritemap-webpack-plugin": "^2.6.0",
  "svgo": "^1.0.5",
  "svgo-loader": "^2.1.0",
  "webpack": "^4.8.3",
  "webpack-cli": "^3.0.8"
},
Code-Sprache: JSON / JSON mit Kommentaren (json)

Und die postcss.config.js:

module.exports = {
	plugins: {
		autoprefixer: { browsers: ['last 2 versions'], grid: true }
	}
}
Code-Sprache: JavaScript (javascript)