WIP: Teste SCSS Kompilation mit Webpack

[polarbirke]

Hintergrund: #5
Siehe außerdem webfactory/webfactory-gulp-preset#48

Auf der Kommandozeile nach yarn install ausprobieren mit

gulp csswebpack

Offene Aufgaben

Überführung von bisher als PostCSS Plugin genutzten Prozessen für

• PurgeCSS
• postcss-preset-env
• Asset URL Rewriting

Option 1: postcss-loader nutzen und unseren Ansatz mit "alles via PostCSS Plugins" weitestmöglich übernehmen

Webpack kennt den postcss-loader, der für den simplen Anwendungsfall (postcss-preset-env) gut funktioniert.

Zu prüfen: können wir die anderen Plugins ebenso leicht überführen?

Option 2: Näher an Webpack bleiben und purgecss-webpack-plugin und https://github.com/bholloway/resolve-url-loader nutzen

purgecss-webpack-plugin: erster Versuch, das einzubauen, schlägt mit "Unknown word" Error fehl, vermutlich wegen falscher Pfadkonfiguration?

resolve-url-loader: noch nicht getestet

🔥 Allgemeines Problem/Risiko mit Webpack

Wir haben bisher die Möglichkeit, pro Entrypoint in gulp-config.js eine Konfiguration zu übergeben, z. B. weil

• wir in Youthpass nur eine einzige CSS-Datei durch PurgeCSS schicken wollen, die anderen aber nicht
• wir bei der SOB für die Infoscreens auf Dateiebene den Browsersupport und die Leserichtung anpassen

Webpack scheint das nicht out-of-the-box zu unterstützen, sondern eine Config für alle Entrypoints nutzen zu wollen.

Eventuell kann man die Entrypoints manuell parsen und dann on-demand eine Webpack-Config mit den richtigen Optionen erzeugen? Bin an https://stackoverflow.com/questions/36205819/webpack-how-can-we-conditionally-use-a-plugin vorbeigekommen, aber…

[polarbirke]

Simpler POC mit pkg:… kompiliert, wenn auch mit einem unschönen 2-Dateien-pro-Entry-Output (scheint Webpack best practice zu sein, weil der default Output des SCSS-Compilers eine JS-Datei ist (😬), die man in einem Extraschritt mit MiniCssExtractPlugin in eine eigene CSS-Datei extrahieren muss. Der Zielort darf innerhalb des gleichen Streams nicht der gleiche sein, daher webpack-tmp/ eingeführt. (😬)

Bei den tieferliegenden Plugins bin ich bisher nur von Problem zu Problem gestolpert.