Rivedi il modulo "ui.frontend" del progetto AEM full-stack

Sono disponibili tre file di configurazione webpack utilizzati per raggruppare le risorse front-end dei siti WKND.

1. webpack.common - Contiene la configurazione common per istruire il bundling e l'ottimizzazione delle risorse WKND. La proprietà output indica dove emettere i file consolidati (noti anche come bundle di JavaScript, ma da non confondere con i bundle OSGi di AEM) che crea. Il nome predefinito è clientlib-site/js/[name].bundle.js.

    ...
    output: {
            filename: 'clientlib-site/js/[name].bundle.js',
            path: path.resolve(__dirname, 'dist')
        }
    ...

1. webpack.dev.js contiene la configurazione development per webpack-dev-server e punta al modello HTML da utilizzare. Contiene anche una configurazione proxy a un'istanza AEM in esecuzione su localhost:4502.

    ...
    devServer: {
        proxy: [{
            context: ['/content', '/etc.clientlibs', '/libs'],
            target: 'http://localhost:4502',
        }],
    ...

1. webpack.prod.js contiene la configurazione production e utilizza i plug-in per trasformare i file di sviluppo in bundle ottimizzati.

    ...
    module.exports = merge(common, {
        mode: 'production',
        optimization: {
            minimize: true,
            minimizer: [
                new TerserPlugin(),
                new CssMinimizerPlugin({ ...})
        }
    ...

Le risorse in bundle vengono spostate nel modulo ui.apps utilizzando il plug-in aem-clientlib-generator, utilizzando la configurazione gestita nel file clientlib.config.js.