Hi @dbb ich hab mich auch damit beschäftigt (siehe: Best practices für wirklich individuelle Shops/Themes "from scratch")
Das Problem ist, dass der Watch Task komplett über nodeJS/Webpack läuft, sowohl JS als auch SCSS. Beim Build Task z.B. bei storefront:build wird nur das JS von Webpack kompiliert. Das SCSS wird über PHP kompiliert mit phpscss. So kann Shopware auch über das Admin immer ein aktuelles CSS Bundle generieren, in dem nur relevantes CSS von aktiven Themes und Plugins enthalten ist. JS muss wie gesagt in einer Umgebung mit nodeJS und dem Build Task kompiliert werden. Dabei wird ein Bundle erzeugt, das dem Theme/Plugin dann beiliegt und von Shopware ebenfalls je nach aktiv/inaktiv injected werden kann.
Wenn du also kontrollieren willst, was bei storefront:hot-proxy oder auch bei storefront:build als Entrypoint genutzt wird, musst du die Webpack Konfiguration überschreiben.
Dazu musst du unter /ExamplePlugin/src/Resources/app/storefront/build/ die Datei webpack.config.js anlegen. So könnte der Inhalt für ein Theme, dass nur JS und SCSS von sich selbst zulässt aussehen:
const path = require('path');
const isHotMode = process.env.MODE === 'hot';
// provide extendable object for building (storefront entrypoints are not inherited by theme.json)
let entry = {};
// force override with function for hot reloading (storefront entrypoints are removed)
if (isHotMode) {
entry = () => {
return {
storefront: [
path.resolve(__dirname, '../src/main.js'),
path.resolve(__dirname, '../../../../../../../../var/theme-entry.scss')
]
}
}
}
module.exports = () => {
return {
entry: entry,
optimization: {
runtimeChunk: false,
splitChunks: false
}
};
}
Für den Build Task wird ein JS Objekt genutzt, das von Shopware Skripten erweitert und gemerged werden kann, da wir die Dependencies hier über die theme.json konfigurieren können.
Für den Watch Task überschreibt man die Entrypoints mit einer Funktion. Die kann von den Skripten dann nicht mehr erweitert werden, wirft auch zum Glück soweit keine Fehler.
In der optimization muss noch festgelegt werden, das keine Junks erzeugt werden. Das hat natürlich den Nachteil, dass man das Code splitting für das komplette Frontend deaktiviert und das alle Skripte nun beim initialen Laden der Seite geladen werden. Also evtl. keine gute Idee für den Community Store.
Das alles habe ich allerdings in einer shopware/development Umgebung gemacht, wie sich das bei den Production Skripten verhält, kann ich dir leider nicht sagen. Bin sehr offen für Verbesserungsvorschläge!
PS: Hast du dir schon mal Shopware PWA angeschaut? GitHub - vuestorefront/shopware-pwa: Shopware PWA for eCommerce. Headless storefront solution for Shopware 6, which communicates through the SalesChannel-API. Always Open Source, MIT license. Made with by shopware AG & Vue Storefront. Evtl. der bessere Ansatz für ein ganz eigenes Frontend, bin auch am überlegen.