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)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

To respond on your own website, enter the URL of your response which should contain a link to this post's permalink URL. Your response will then appear (possibly after moderation) on this page. Want to update or remove your response? Update or delete your post and re-enter your post's URL again. (Find out more about Webmentions.)