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'],

Ü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', },

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', },

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' } ] } ] }, };

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" },

Und die postcss.config.js:

module.exports = { plugins: { autoprefixer: { browsers: ['last 2 versions'], grid: true } } }

Das könnte auch interessant sein

Schreib einen Kommentar

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