How to extract the common Encore settings when I am working with multiple configurations

good afternoon. My question is how I could take the common part of the configurations and apply it to the multiple configurations. In other words, how can I make multiple configurations extend from one common configuration?

I provide a reduced Encore configuration to illustrate the problem. In my original webpack.config.js I have 5 more configs so I am repeating a lot of code, it works but is not really maintainable.

It is not something that is explained in the Symfony documentation about it.

// FRONTEND CONFIGURATION
Encore
    .setOutputPath("public/compiled/frontend/")
    .setPublicPath("/compiled/frontend")
    .addEntry("frontend", "./assets/entries/frontend/frontend.js")
    .addPlugin(new WebpackBar({
        name: "Frontend",
        color: "blue",
    }))

    // Common configuration
    .addAliases({
        "@": path.resolve(__dirname, "assets", "js"),
        styles: path.resolve(__dirname, "assets", "scss"),
        fonts: path.resolve(__dirname, "assets", "fonts"),
    })
    .enableVueLoader();

const frontend = Encore.getWebpackConfig();
frontend.name = "frontend";
Encore.reset();

// AGENCY CONFIGURATION
Encore
    .setOutputPath("public/compiled/agency/")
    .setPublicPath("/compiled/agency")
    .addEntry("agency", "./assets/entries/agency/agency.js")
    .addPlugin(new WebpackBar({
        name: "Agency",
        color: "green",
    }))

    // Common configuration
    .addAliases({
        "@": path.resolve(__dirname, "assets", "js"),
        styles: path.resolve(__dirname, "assets", "scss"),
        fonts: path.resolve(__dirname, "assets", "fonts"),
    })
    .enableVueLoader();

const agency = Encore.getWebpackConfig();
agency.name = "agency";
Encore.reset();

module.exports = [frontend, agency];

Source: Symfony Questions

Was this helpful?

0 / 0

#javascript #symfony #webpack-encore