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