フルスタック AEM プロジェクトの「ui.frontend」モジュールを確認する

WKND Sites のフロントエンドリソースをバンドルするために使用される webpack 設定ファイルは 3 つあります。

1. webpack.common - これには、WKND リソースのバンドルと最適化を指示する​ 共通 ​設定が含まれます。output プロパティは、作成する統合ファイル（JavaScript バンドルとも呼ばれますが、AEM OSGi バンドルと混同しないように）を出力する場所を指定します。デフォルトの名前は clientlib-site/js/[name].bundle.js に設定されています。

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

1. webpack.dev.js には、webpack-dev-serve の​ 開発 ​設定が含まれており、使用する HTML テンプレートを指しています。また、localhost:4502 で実行されている AEM インスタンスへのプロキシ設定も含まれます。

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

1. webpack.prod.js には​ 実稼働 ​設定が含まれており、プラグインを使用して開発ファイルを最適化されたバンドルに変換します。

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

バンドルされたリソースは、aem-clientlib-generator プラグインを使用して、clientlib.config.js ファイルで管理されている設定を使用して ui.apps モジュールに移動されます。