@oroinc/oro-webpack-config-builder 5.1.0-alpha25 → 5.1.0-alpha29

package/modules-config/layout-modules-config-loader.js

@@ -17,6 +17,66 @@ class LayoutModulesConfigLoader extends ModulesConfigLoader {
 
         return themeConfig;
     }
+
+    /**
+     * All build names:
+     *  - based on theme names
+     *  - and theme's extra js builds
+     *
+     * @return {string[]}
+     */
+    get buildNames() {
+        const buildNames = super.buildNames;
+        this.themeNames.forEach(theme => {
+            buildNames.push(...this.extraJSBuildNames(theme));
+        });
+        return buildNames;
+    }
+
+    /**
+     * Collect extra js-build names for a theme
+     *
+     * @param {string} theme name on the theme
+     * @return {string[]}
+     */
+    extraJSBuildNames(theme) {
+        const {extra_js_builds:  extraJSBuilds = []} = this._themes[theme] || {}
+        return [...extraJSBuilds.map(suffix => `${theme}-${suffix}`)];
+    }
+
+    /**
+     * Check if buildName is an extra js build of layout theme
+     *
+     * @param {string} buildName name of the build
+     * @return {boolean}
+     */
+    isExtraJSBuild(buildName) {
+        const [, suffix] = this.splitBuildName(buildName);
+        return suffix !== void 0;
+    }
+
+    /**
+     * Splits build name on parts theme name and suffix (name of extra js build)
+     * @param {string} buildName
+     * @return {[string]|[string, string]}
+     */
+    splitBuildName(buildName) {
+        // suffix can not contain '-'
+        const marches = buildName.match(/(.+)-([^\-]+)?/);
+        const result = [];
+        if (marches) {
+            const [, theme, suffix] = marches;
+            const {extra_js_builds:  extraJSBuilds = []} = this._themes[theme] || {}
+            if (extraJSBuilds.includes(suffix)) {
+                result.push(marches[1], marches[2]);
+            } else {
+                result.push(buildName);
+            }
+        } else {
+            result.push(buildName);
+        }
+        return result;
+    }
 }
 
 module.exports = LayoutModulesConfigLoader;

package/modules-config/modules-config-loader.js

@@ -3,6 +3,9 @@ const fs = require('fs');
 const merge = require('deepmerge');
 const yaml = require('js-yaml');
 
+// merge only unique items
+const arrayMerge = (target, source) => target.concat(source.filter(item => !target.includes(item)));
+
 class ModulesConfigLoader {
     /**
      * @returns {Array}
@@ -18,10 +21,17 @@ class ModulesConfigLoader {
         return Object.keys(this._themes);
     }
 
+    /**
+     * @returns {Array}
+     */
+    get buildNames() {
+        return this.themeNames;
+    }
+
     /**
      * @param {Array} bundles Array of ordered symfony bundle paths
      * @param {string} themesLocation Path inside the bundle, where to find the theme
-     * @param {string} themeInfoFileName Yml File name with theme info
+     * @param {string} themeInfoFileName Yaml File name with theme info
      */
     constructor(bundles, themesLocation, themeInfoFileName) {
         this._bundles = bundles;
@@ -43,17 +53,15 @@ class ModulesConfigLoader {
             if (!fs.existsSync(source)) return;
 
             fs.readdirSync(source).forEach(name => {
-                const theme = path.resolve(source, name);
-                if (!fs.lstatSync(theme).isDirectory()) {
+                const themePath = path.resolve(source, name);
+                if (!fs.lstatSync(themePath).isDirectory()) {
                     return;
                 }
-                const themeFile = path.resolve(theme, themeInfoFileName);
+                const themeFile = path.resolve(themePath, themeInfoFileName);
                 if (!fs.existsSync(themeFile)) return;
 
-                if (!(name in themes)) {
-                    themes[name] = null;
-                }
-                themes[name] = yaml.load(fs.readFileSync(themeFile, 'utf8'));
+                const theme = yaml.load(fs.readFileSync(themeFile, 'utf8'));
+                themes[name] = merge(themes[name] || {}, theme, {arrayMerge});
             });
         });
 
@@ -63,7 +71,7 @@ class ModulesConfigLoader {
     /**
      * @param {string} theme Theme name
      * @param {string|string[]} filePath Path (or paths with fallback) to the file inside bundle directory where to find the configs
-     * @return {Object} Merged Configs loaded from all the bundles Yml files matched by filePath
+     * @return {Object} Merged Configs loaded from all the bundles Yaml files matched by filePath
      */
     loadConfig(theme, filePath) {
         let configs = {};

package/oro-webpack-config.js

@@ -127,298 +127,346 @@ class ConfigBuilder {
         return (env = {}, args = {}) => {
             this._initialize(args, env);
 
-            const {theme: selectedTheme} = env;
-            this._validateThemeName(selectedTheme);
-
-            let themes = [];
-            // Admin themes
-            if (selectedTheme === undefined) {
-                // themes.push(this._adminTheme.split(".")[1]);
-                themes.push(this._adminTheme);
-            } else if (this._adminThemes.indexOf(selectedTheme) !== -1) {
-                // themes.push(selectedTheme.split(".")[1]);
-                themes.push(selectedTheme);
-            }
+            const commonConfig = this._getCommonWebpackConfig(args, env);
+            const webpackConfigs = [];
+            const requestedBuildNames = env.theme ? env.theme.split(',') : [];
+            const buildNames = this._getBuildNames(requestedBuildNames);
+            buildNames.forEach(buildName => {
+                const buildConfig = this._getThemeWebpackConfig(buildName, args, env);
+                if (buildConfig) {
+                    webpackConfigs.push(webpackMerge(buildConfig, commonConfig));
+                }
+            });
 
-            // Layout Themes
-            if (this._enableLayoutThemes) {
-                if (selectedTheme === undefined) {
-                    // build all layout themes
-                    if (this._defaultLayoutThemes) {
-                        themes = [...themes, ...this._defaultLayoutThemes];
-                    } else {
-                        themes = [...themes, ...this._appConfig['themes']];
-                    }
-                } else if (this._layoutThemes.indexOf(selectedTheme) !== -1) {
-                    // build single layout theme
-                    themes.push(selectedTheme);
+            return webpackConfigs;
+        };
+    }
+
+    get resolvedPublicPath() {
+        if (this._resolvedPublicPath === undefined) {
+            this._resolvedPublicPath = path.resolve(this._publicPath);
+        }
+        return this._resolvedPublicPath;
+    }
+
+    get resolvedNodeModulesPath() {
+        if (this._resolvedNodeModulesPath === undefined) {
+            this._resolvedNodeModulesPath = path.resolve('node_modules');
+        }
+        return this._resolvedNodeModulesPath;
+    }
+
+    get assetVersion() {
+        if (this._assetVersion === undefined) {
+            const filePath = path.join(this.resolvedPublicPath, '/build/build_version.txt');
+            this._assetVersion = fs.existsSync(filePath) ? String(fs.readFileSync(filePath)) : null;
+        }
+        return this._assetVersion;
+    }
+
+    _getBuildNames(requestedBuildNames = []) {
+        const buildNames = [];
+        requestedBuildNames.forEach(buildName => this._validateBuildName(buildName));
+
+        // Admin themes
+        if (!requestedBuildNames.length) {
+            buildNames.push(this._adminTheme);
+        } else {
+            requestedBuildNames.forEach(buildName => {
+                if (this._isAdminTheme(buildName)) {
+                    buildNames.push(buildName);
                 }
+            });
+        }
+
+        // Layout Themes
+        if (this._enableLayoutThemes) {
+            if (!requestedBuildNames.length) {
+                // build all layout themes
+                const themes = this._defaultLayoutThemes || this._appConfig.themes;
+                buildNames.push(...themes);
+                themes.forEach(theme => {
+                    buildNames.push(...this._layoutModulesConfigLoader.extraJSBuildNames(theme));
+                });
+            } else {
+                // build single layout theme
+                requestedBuildNames.forEach(buildName => {
+                    if (this._layoutModulesConfigLoader.buildNames.includes(buildName)) {
+                        buildNames.push(buildName);
+                    }
+                });
             }
+        }
 
-            const resolvedPublicPath = path.resolve(this._publicPath);
-            const resolvedNodeModulesPath = path.resolve('node_modules');
-            const assetVersionFilePath = path.join(resolvedPublicPath, '/build/build_version.txt');
-            const assetVersion = fs.existsSync(assetVersionFilePath) ? fs.readFileSync(assetVersionFilePath) : null;
-
-            const stats = env.stats || {
-                hash: false,
-                version: false,
-                // Do not write the information about files emitted from node_modules or public bundles,
-                // and hide css/*/*.js files from the output.
-                excludeAssets: [/^bundles\//, /^\.\.\/_static\//, /^css\/.+\.js/],
-                children: false,
-                entrypoints: false,
-                performance: this._isProduction,
-                chunks: false,
-                modules: false,
-                source: false,
-                publicPath: true,
-                builtAt: false,
-                warnings: false
-            };
-            let webpackConfig = {
-                watchOptions: {
-                    aggregateTimeout: 200,
-                    ignored: /[\/\\]node_modules[\/\\].*\.js$/
-                },
-                stats: stats,
-                output: {
-                    filename: '[name].js',
-                    // Because we use third party libraries 'chunkFilename' should include only [name]
-                    chunkFilename: this._getVersionedPath('chunk/[name].js', assetVersion)
-                },
-                devtool: !env.skipSourcemap && 'inline-cheap-module-source-map',
-                mode: 'development',
-                optimization: {
-                    moduleIds: 'named',
-                    splitChunks: {
-                        cacheGroups: {
-                            defaultVendors: false
-                        }
+        return buildNames;
+    }
+
+    _getCommonWebpackConfig(args, env) {
+        const stats = env.stats || {
+            hash: false,
+            version: false,
+            // Do not write the information about files emitted from node_modules or public bundles,
+            // and hide css/*/*.js files from the output.
+            excludeAssets: [/^bundles\//, /^\.\.\/_static\//, /^css\/.+\.js/],
+            children: false,
+            entrypoints: false,
+            performance: this._isProduction,
+            chunks: false,
+            modules: false,
+            source: false,
+            publicPath: true,
+            builtAt: false,
+            warnings: false
+        };
+
+        const webpackConfig = {
+            watchOptions: {
+                aggregateTimeout: 200,
+                ignored: /[\/\\]node_modules[\/\\].*\.js$/
+            },
+            stats,
+            output: {
+                filename: '[name].js',
+                // Because we use third party libraries 'chunkFilename' should include only [name]
+                chunkFilename: this._getVersionedPath('chunk/[name].js', this.assetVersion)
+            },
+            devtool: !env.skipSourcemap && 'inline-cheap-module-source-map',
+            mode: 'development',
+            optimization: {
+                moduleIds: 'named',
+                splitChunks: {
+                    cacheGroups: {
+                        defaultVendors: false
                     }
-                },
-                resolveLoader: {
-                    modules: [
-                        resolvedPublicPath,
-                        path.join(__dirname, './loader'),
-                        resolvedPublicPath + '/bundles',
-                        resolvedNodeModulesPath
-                    ]
-                },
-                module: {
-                    noParse: [
-                        /[\/\\]bundles[\/\\]\.*[\/\\]lib[\/\\](?!chaplin|bootstrap|jquery\.dialog).*\.js$/
-                    ],
-                    rules: [
-                        {
-                            test: /\.s?css$/,
-                            use: [{
-                                loader: args.hot ? 'style-loader' : MiniCssExtractPlugin.loader
-                            }, {
-                                loader: 'css-loader',
-                                options: {
-                                    importLoaders: 1,
-                                    sourceMap: true
-                                }
-                            }, {
-                                loader: 'resolve-url-loader'
-                            }, {
-                                loader: 'postcss-loader',
-                                options: {
-                                    sourceMap: true,
-                                    postcssOptions: {
-                                        plugins: [
-                                            require('autoprefixer')
-                                        ]
-                                    }
-                                }
-                            }, {
-                                loader: 'sass-loader',
-                                options: {
-                                    sassOptions: {
-                                        includePaths: [
-                                            resolvedPublicPath + '/bundles'
-                                        ],
-                                        outputStyle: 'expanded'
-                                    },
-                                    sourceMap: true
+                }
+            },
+            resolveLoader: {
+                modules: [
+                    this.resolvedPublicPath,
+                    path.join(__dirname, './loader'),
+                    path.join(this.resolvedPublicPath, '/bundles'),
+                    this.resolvedNodeModulesPath
+                ]
+            },
+            module: {
+                noParse: [
+                    /[\/\\]bundles[\/\\]\.*[\/\\]lib[\/\\](?!chaplin|bootstrap|jquery\.dialog).*\.js$/
+                ],
+                rules: [
+                    {
+                        test: /\.s?css$/,
+                        use: [{
+                            loader: args.hot ? 'style-loader' : MiniCssExtractPlugin.loader
+                        }, {
+                            loader: 'css-loader',
+                            options: {
+                                importLoaders: 1,
+                                sourceMap: true,
+                                // can't use esModule since resolve-url-loader needs file path to start with '~'
+                                esModule: false
+                            }
+                        }, {
+                            loader: 'resolve-url-loader'
+                        }, {
+                            loader: 'postcss-loader',
+                            options: {
+                                sourceMap: true,
+                                postcssOptions: {
+                                    plugins: [
+                                        require('autoprefixer')
+                                    ]
                                 }
-                            }]
-                        },
-                        {
-                            test: /\.(eot|ttf|woff|woff2|cur|ico|svg|png|jpg|gif)$/,
-                            loader: 'url-loader',
+                            }
+                        }, {
+                            loader: 'sass-loader',
                             options: {
-                                limit: 1,
-                                emitFile: true,
-                                outputPath: '../_static/',
-                                publicPath: '../../_static/',
-                                name: this._getVersionedPath('[path][name].[ext]', assetVersion)
+                                sassOptions: {
+                                    includePaths: [
+                                        path.join(this.resolvedPublicPath, '/bundles')
+                                    ],
+                                    outputStyle: 'expanded'
+                                },
+                                sourceMap: true
                             }
+                        }]
+                    },
+                    {
+                        test: /\.(eot|ttf|woff|woff2|cur|ico|svg|png|jpg|gif)$/,
+                        loader: 'url-loader',
+                        options: {
+                            limit: 1,
+                            emitFile: true,
+                            outputPath: '../_static/',
+                            publicPath: '../../_static/',
+                            name: this._getVersionedPath('[path][name].[ext]', this.assetVersion)
                         }
-                    ]
-                },
-                performance: {hints: false},
-                plugins: [
-                    new MiniCssExtractPlugin({
-                        filename: '[name].css'
-                    }),
-                    new CleanupStatsPlugin(),
-                    // Ignore all locale files of moment.js
-                    new webpack.IgnorePlugin({
-                        resourceRegExp: /^\.[\/\\]locale$/,
-                        contextRegExp: /moment$/
-                    }),
-                    new webpack.optimize.MinChunkSizePlugin({
-                        minChunkSize: 30000 // Minimum number of characters
-                    })
+                    }
                 ]
-            };
-
-            if (env.analyze) {
-                webpackConfig.plugins.push(new BundleAnalyzerPlugin());
-            }
+            },
+            performance: {hints: false},
+            plugins: [
+                new MiniCssExtractPlugin({
+                    filename: '[name].css'
+                }),
+                new CleanupStatsPlugin(),
+                // Ignore all locale files of moment.js
+                new webpack.IgnorePlugin({
+                    resourceRegExp: /^\.[\/\\]locale$/,
+                    contextRegExp: /moment$/
+                }),
+                new webpack.optimize.MinChunkSizePlugin({
+                    minChunkSize: 30000 // Minimum number of characters
+                })
+            ]
+        };
 
-            if (!env.skipJS && !env.skipBabel) {
-                const happyPackOptions = {
-                    id: 'babel',
-                    loaders: [
-                        {
-                            loader: 'babel-loader',
-                            options: this._babelConfig
-                        }
-                    ]
-                };
-
-                webpackConfig.plugins.push(new HappyPack(happyPackOptions));
-
-                webpackConfig.module.rules.push({
-                    test: /\.js$/,
-                    exclude: [
-                        /[\/\\]platform[\/\\]build[\/\\]/,
-                        /[\/\\]node_modules[\/\\]/,
-                        /[\/\\]bundles[\/\\].+[\/\\]lib[\/\\]?/
-                    ],
-                    use: 'happypack/loader?id=babel'
-                });
-            }
+        if (env.analyze) {
+            webpackConfig.plugins.push(new BundleAnalyzerPlugin());
+        }
 
-            if (args.hot) {
-                const https = this._appConfig.devServerOptions.https;
-                const schema = https ? 'https' : 'http';
-                const devServerHost = this._appConfig.devServerOptions.host;
-                const devServerPort = this._appConfig.devServerOptions.port;
-                webpackConfig.devServer = {
-                    contentBase: resolvedPublicPath,
-                    host: devServerHost,
-                    port: devServerPort,
-                    https: https,
-                    compress: true,
-                    stats: stats,
-                    disableHostCheck: true,
-                    clientLogLevel: 'error',
-                    headers: {
-                        'Access-Control-Allow-Origin': '*'
+        if (!env.skipJS && !env.skipBabel) {
+            const happyPackOptions = {
+                id: 'babel',
+                loaders: [
+                    {
+                        loader: 'babel-loader',
+                        options: this._babelConfig
                     }
-                };
-                webpackConfig.output.publicPath = `${schema}://${devServerHost}:${devServerPort}/`;
-            }
-
-            // Additional setting for production mode
-            if (this._isProduction) {
-                webpackConfig = webpackMerge(webpackConfig, {
-                    devtool: false,
+                ]
+            };
 
-                    plugins: [
-                        new CssMinimizerPlugin()
-                    ]
-                });
-            }
+            webpackConfig.plugins.push(new HappyPack(happyPackOptions));
 
-            const webpackConfigs = [];
+            webpackConfig.module.rules.push({
+                test: /\.js$/,
+                exclude: [
+                    /[\/\\]platform[\/\\]build[\/\\]/,
+                    /[\/\\]node_modules[\/\\]/,
+                    /[\/\\]bundles[\/\\].+[\/\\]lib[\/\\]?/
+                ],
+                use: 'happypack/loader?id=babel'
+            });
+        }
 
-            themes.forEach(theme => {
-                let themeDefinition;
-                let themeConfig;
-                let buildPublicPath;
-                if (this._isAdminTheme(theme)) {
-                    themeDefinition = this._modulesConfigLoader.themes[theme.split('.')[1]];
-                    buildPublicPath = '/build/admin/';
-                    themeConfig = this._themeConfigFactory
-                        .create(theme, buildPublicPath,
-                            ['Resources/config/oro/jsmodules.yml', 'Resources/config/jsmodules.yml']);
-                } else {
-                    themeDefinition = this._layoutModulesConfigLoader.themes[theme];
-                    buildPublicPath = `/build/${theme}/`;
-                    themeConfig = this._layoutThemeConfigFactory
-                        .create(theme, buildPublicPath, 'config/jsmodules.yml');
-                }
-                const {rtl_support: rtlSupport = false} = themeDefinition;
-                const resolvedBuildPath = path.join(resolvedPublicPath, buildPublicPath);
-
-                const resolverConfig = {
-                    modules: [
-                        resolvedBuildPath,
-                        resolvedPublicPath,
-                        resolvedPublicPath + '/bundles',
-                        resolvedPublicPath + '/js',
-                        resolvedNodeModulesPath
-                    ],
-                    alias: themeConfig.aliases,
-                    cacheWithContext: true,
-                    symlinks: false
-                };
-                const resolver = (resolver => {
-                    return moduleName => resolver({}, '', moduleName, {});
-                })(resolve.create.sync({...resolverConfig}));
-
-                const plugins = [];
-                if (rtlSupport && !env.skipCSS && !env.skipRTL) {
-                    plugins.push(new RtlCssWebpackPlugin({
-                        filename: '[name].rtl.css'
-                    }));
+        if (args.hot) {
+            const https = this._appConfig.devServerOptions.https;
+            const schema = https ? 'https' : 'http';
+            const devServerHost = this._appConfig.devServerOptions.host;
+            const devServerPort = this._appConfig.devServerOptions.port;
+            webpackConfig.devServer = {
+                contentBase: this.resolvedPublicPath,
+                host: devServerHost,
+                port: devServerPort,
+                https: https,
+                compress: true,
+                stats: webpackConfig.stats,
+                disableHostCheck: true,
+                clientLogLevel: 'error',
+                headers: {
+                    'Access-Control-Allow-Origin': '*'
                 }
+            };
+            webpackConfig.output.publicPath = `${schema}://${devServerHost}:${devServerPort}/`;
+        }
 
-                const cssEntryPoints = !env.skipCSS ? this._getCssEntryPoints(theme, buildPublicPath) : {};
-                const jsEntryPoints = !env.skipJS ? themeConfig.entry : {};
+        // Additional setting for production mode
+        if (this._isProduction) {
+            webpackConfig.devtool = false;
+            webpackConfig.plugins.push(new CssMinimizerPlugin());
+        }
 
-                const entryPoints = {...cssEntryPoints, ...jsEntryPoints};
-                if (Object.keys(entryPoints).length === 0) {
-                    return;
-                }
-                webpackConfigs.push(webpackMerge({
-                    entry: entryPoints,
-                    name: theme + ' theme',
-                    output: {
-                        publicPath: buildPublicPath,
-                        path: resolvedBuildPath
-                    },
-                    context: resolvedPublicPath,
-                    resolve: {
-                        ...resolverConfig,
-                        plugins: [
-                            new MapModulesPlugin(prepareModulesMap(resolver, themeConfig.map))
-                        ]
-                    },
-                    plugins,
-                    module: {
-                        rules: [
-                            {
-                                test: /[\/\\]configs\.json$/,
-                                loader: 'config-loader',
-                                options: {
-                                    resolver,
-                                    relativeTo: resolvedPublicPath
-                                }
-                            },
-                            ...prepareModulesShim(resolver, themeConfig.shim)
-                        ]
-                    }
-                }, webpackConfig));
-            });
+        return webpackConfig;
+    }
 
-            return webpackConfigs;
+    _getThemeWebpackConfig(buildName, args, env) {
+        let {skipCSS, skipJS, skipRTL} = env;
+        let themeDefinition;
+        let jsBuildConfig;
+        let buildPublicPath;
+        if (this._isAdminTheme(buildName)) {
+            themeDefinition = this._modulesConfigLoader.themes[buildName.split('.')[1]];
+            buildPublicPath = '/build/admin/';
+            const jsModulesConfig = this._themeConfigFactory.loadConfig(buildName,
+                ['Resources/config/oro/jsmodules.yml', 'Resources/config/jsmodules.yml']);
+            jsBuildConfig = this._themeConfigFactory.create(buildPublicPath, jsModulesConfig);
+        } else if (this._layoutModulesConfigLoader.isExtraJSBuild(buildName)) {
+            const [theme, suffix] = this._layoutModulesConfigLoader.splitBuildName(buildName);
+            skipCSS = true;
+            themeDefinition = this._layoutModulesConfigLoader.themes[theme];
+            buildPublicPath = `/build/${buildName}/`;
+            const baseConfig = this._layoutThemeConfigFactory.loadConfig(theme, 'config/jsmodules.yml');
+            const extraConfig = this._layoutThemeConfigFactory.loadConfig(theme, `config/jsmodules-${suffix}.yml`);
+            const jsModulesConfig = this._layoutThemeConfigFactory.extendConfig(baseConfig, extraConfig);
+            jsBuildConfig = this._layoutThemeConfigFactory.create(buildPublicPath, jsModulesConfig);
+        } else {
+            themeDefinition = this._layoutModulesConfigLoader.themes[buildName];
+            buildPublicPath = `/build/${buildName}/`;
+            const jsModulesConfig = this._layoutThemeConfigFactory.loadConfig(buildName, 'config/jsmodules.yml');
+            jsBuildConfig = this._layoutThemeConfigFactory.create(buildPublicPath, jsModulesConfig);
+        }
+        const {rtl_support: rtlSupport = false} = themeDefinition;
+        const resolvedBuildPath = path.join(this.resolvedPublicPath, buildPublicPath);
+
+        const resolverConfig = {
+            modules: [
+                resolvedBuildPath,
+                this.resolvedPublicPath,
+                path.join(this.resolvedPublicPath, '/bundles'),
+                path.join(this.resolvedPublicPath, '/js'),
+                this.resolvedNodeModulesPath
+            ],
+            alias: jsBuildConfig.aliases,
+            cacheWithContext: true,
+            symlinks: false
         };
+        const resolver = (resolver => {
+            return moduleName => resolver({}, '', moduleName, {});
+        })(resolve.create.sync({...resolverConfig}));
+
+        const plugins = [];
+        if (rtlSupport && !skipCSS && !skipRTL) {
+            plugins.push(new RtlCssWebpackPlugin({
+                filename: '[name].rtl.css'
+            }));
+        }
+
+        const cssEntryPoints = !skipCSS ? this._getCssEntryPoints(buildName, buildPublicPath) : {};
+        const jsEntryPoints = !skipJS ? jsBuildConfig.entry : {};
+
+        const entryPoints = {...cssEntryPoints, ...jsEntryPoints};
+        if (Object.keys(entryPoints).length === 0) {
+            return;
+        }
+
+        return {
+            entry: entryPoints,
+            name: buildName + ' theme',
+            output: {
+                publicPath: buildPublicPath,
+                path: resolvedBuildPath
+            },
+            context: this.resolvedPublicPath,
+            resolve: {
+                ...resolverConfig,
+                plugins: [
+                    new MapModulesPlugin(prepareModulesMap(resolver, jsBuildConfig.map))
+                ]
+            },
+            plugins,
+            module: {
+                rules: [
+                    {
+                        test: /[\/\\]configs\.json$/,
+                        loader: 'config-loader',
+                        options: {
+                            resolver,
+                            relativeTo: this.resolvedPublicPath
+                        }
+                    },
+                    ...prepareModulesShim(resolver, jsBuildConfig.shim)
+                ]
+            }
+        }
     }
 
     _initialize(args, env) {
@@ -447,7 +495,6 @@ class ConfigBuilder {
             '/Resources/views/layouts/',
             'theme.yml'
         );
-        this._layoutThemes = this._layoutModulesConfigLoader.themeNames;
         this._layoutStyleLoader = new LayoutStyleLoader(this._layoutModulesConfigLoader, entryPointFileWriter);
         this._layoutThemeConfigFactory = new ThemeConfigFactory(
             this._layoutModulesConfigLoader,
@@ -472,25 +519,25 @@ class ConfigBuilder {
         return this._layoutStyleLoader.getThemeEntryPoints(theme, buildPath);
     }
 
-    _validateThemeName(theme) {
-        let existingThemes = this._adminThemes;
+    _validateBuildName(buildName) {
+        const buildNames = [...this._adminThemes];
         if (this._enableLayoutThemes) {
-            existingThemes = existingThemes.concat(this._layoutThemes);
+            buildNames.push(...this._layoutModulesConfigLoader.buildNames);
         }
-        if (theme === 'admin') {
+        if (buildName === 'admin') {
             throw new Error(
                 'The "admin" is a reserved word and cannot be used as a theme name.'
             );
         }
-        if (theme !== undefined && !existingThemes.includes(theme)) {
+        if (buildName !== undefined && !buildNames.includes(buildName)) {
             throw new Error(
-                'Theme "' + theme + '" doesn\'t exists. Existing themes:' + existingThemes.join(', ')
+                'Theme "' + buildName + '" doesn\'t exists. Existing themes:' + buildNames.join(', ')
             );
         }
     }
 
     _isAdminTheme(theme) {
-        return this._adminThemes.indexOf(theme) !== -1;
+        return this._adminThemes.includes(theme);
     }
 }
 

package/package.json

@@ -1,48 +1,48 @@
 {
   "name": "@oroinc/oro-webpack-config-builder",
-  "version": "5.1.0-alpha25",
+  "version": "5.1.0-alpha29",
   "author": "Oro, Inc (https://www.oroinc.com)",
   "license": "MIT",
   "description": "An integration of OroPlatform based applications with the Webpack.",
   "main": "oro-webpack-config.js",
   "dependencies": {
-    "@babel/core": "^7.14.3",
-    "@babel/plugin-transform-runtime": "^7.14.3",
-    "@babel/preset-env": "^7.14.2",
-    "autoprefixer": "^10.2.6",
-    "babel-loader": "^8.1.0",
+    "@babel/core": "^7.16.0",
+    "@babel/plugin-transform-runtime": "^7.16.0",
+    "@babel/preset-env": "^7.16.0",
+    "autoprefixer": "^10.4.0",
+    "babel-loader": "^8.2.3",
     "bindings": "^1.5.0",
-    "css-loader": "^5.2.6",
-    "css-minimizer-webpack-plugin": "^3.0.0",
+    "css-loader": "^6.5.1",
+    "css-minimizer-webpack-plugin": "^3.1.3",
     "deepmerge": "^4.2.2",
-    "exports-loader": "^3.0.0",
-    "expose-loader": "^3.0.0",
+    "exports-loader": "^3.1.0",
+    "expose-loader": "^3.1.0",
     "extract-loader": "^5.1.0",
     "file-loader": "^6.2.0",
     "happypack": "^5.0.1",
-    "html-webpack-plugin": "^5.2.0",
-    "imports-loader": "^3.0.0",
+    "html-webpack-plugin": "^5.5.0",
+    "imports-loader": "^3.1.1",
     "js-yaml": "^4.1.0",
-    "mini-css-extract-plugin": "^1.5.1",
+    "mini-css-extract-plugin": "^2.4.4",
     "minimist": "^1.2.3",
-    "nan": "^2.14.2",
+    "nan": "^2.15.0",
     "path": "0.12.7",
-    "postcss": "^8.3.0",
-    "postcss-loader": "^5.3.0",
+    "postcss": "^8.3.11",
+    "postcss-loader": "^6.2.0",
     "printf": "^0.6.0",
     "resolve-url-loader": "^4.0.0",
     "rtlcss-webpack-plugin": "^4.0.6",
-    "sass": "^1.42.1",
-    "sass-loader": "^11.1.1",
-    "style-loader": "^2.0.0",
-    "terser": "^5.7.0",
+    "sass": "^1.43.4",
+    "sass-loader": "^12.3.0",
+    "style-loader": "^3.3.1",
+    "terser": "^5.9.0",
     "text-loader": "0.0.1",
     "underscore": "^1.13.1",
     "url-loader": "^4.1.1",
-    "webpack": "^5.38.1",
-    "webpack-bundle-analyzer": "^4.4.2",
-    "webpack-cli": "^4.7.2",
-    "webpack-dev-server": "^3.11.0",
+    "webpack": "^5.63.0",
+    "webpack-bundle-analyzer": "^4.5.0",
+    "webpack-cli": "^4.9.1",
+    "webpack-dev-server": "^4.4.0",
     "webpack-merge": "^5.8.0",
     "wildcard": "^2.0.0"
   }

package/style/admin-style-loader.js

@@ -10,7 +10,7 @@ class AdminStyleLoader extends StyleLoader {
             this._configLoader.loadConfig(themeName, 'Resources/public/themes/' + themeName + '/settings.yml');
         const baseThemeConfig = this._configLoader.loadConfig(themeName, 'Resources/config/oro/assets.yml');
         /** @type {Object.<string, ThemeGroupConfig>} */
-        const themeConfig = merge({}, baseThemeConfig, extraThemeConfig);
+        const themeConfig = merge(baseThemeConfig, extraThemeConfig);
 
         return {
             themeConfig,

package/style/style-loader.js

@@ -105,20 +105,33 @@ class StyleLoader {
      * @protected
      */
     _sortInputs(inputs) {
+        const primarySettingsInputs = [];
         const settingsInputs = [];
+        const primaryVariablesInputs = [];
         const variablesInputs = [];
         const restInputs = [];
 
         inputs.forEach(input => {
-            if (input.indexOf('/settings/') > 0) {
+            if (input.indexOf('/settings/primary-settings') > 0) {
+                primarySettingsInputs.push(input);
+            } else if (input.indexOf('/settings/') > 0)  {
                 settingsInputs.push(input);
-            } else if (input.indexOf('/variables/') > 0) {
+            } else  if (input.indexOf('/variables/primary-variables') > 0) {
+                primaryVariablesInputs.push(input);
+            } else if (input.indexOf('/variables/') > 0)  {
                 variablesInputs.push(input);
             } else {
                 restInputs.push(input);
             }
         });
-        return [...settingsInputs, ...variablesInputs, ...restInputs];
+
+        return [
+            ...primarySettingsInputs,
+            ...settingsInputs,
+            ...primaryVariablesInputs,
+            ...variablesInputs,
+            ...restInputs
+        ];
     }
 
     /**

package/theme-config-factory.js

@@ -11,15 +11,52 @@ class ThemeConfigFactory {
         this._appModulesFileWriter = appModulesFileWriter;
         this._configsFileWriter = configsFileWriter;
     }
-
     /**
      * @param {string} theme Theme name
-     * @param {string} buildPath Path to theme build folder
      * @param {string|string[]} configFilepath Path (or paths with fallback) to yaml config file in a bundle
-     * @return {Object} List of Webpack entry-points
+     * @return {Object} Merged Configs loaded from all the bundles Yaml files matched by filePath
+     */
+    loadConfig(theme, configFilepath) {
+        return this._configLoader.loadConfig(theme, configFilepath);
+    }
+
+    extendConfig(baseConfig, extraConfig) {
+        const {
+            aliases = {},
+            configs,
+            map = {},
+            shim = {},
+        } = baseConfig;
+
+        const {
+            ['app-modules']: appModules,
+            ['dynamic-imports']: dynamicImports,
+            entry,
+            ...rest
+        } = extraConfig;
+
+        const beyondKeys = Object.keys(rest);
+        if (beyondKeys.length) {
+            throw new Error(`Sections ["${beyondKeys.join('", "')}"] are not allowed in extra js build definition`);
+        }
+
+        return {
+            aliases,
+            'app-modules': appModules,
+            configs,
+            'dynamic-imports': dynamicImports,
+            entry,
+            map,
+            shim
+        };
+    }
+
+    /**
+     * @param {string} buildPath Path to theme build folder
+     * @param {Object} jsModulesConfig configuration loaded from jsmodules files and merged together
+     * @return {Object} webpack configuration fragment
      */
-    create(theme, buildPath, configFilepath) {
-        const jsModulesConfig = this._configLoader.loadConfig(theme, configFilepath);
+    create(buildPath, jsModulesConfig) {
         const {
             entry,
             map = {},