Блог

Добрый день! Мой вопрос в том, как я мог бы взять общую часть конфигураций и применить ее к нескольким конфигурациям. Другими словами, как я могу расширить несколько конфигураций из одной общей конфигурации?

Я предоставляю уменьшенную конфигурацию Encore, чтобы проиллюстрировать проблему. В моем оригинале webpack.config.js у меня есть еще 5 конфигураций, поэтому я повторяю много кода, он работает, но на самом деле не поддерживается.

Это не то, что объясняется в документации Symfony по этому поводу.

 // 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];

  

Общая часть

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

Я опубликовал свою проблему на странице Webpack Encore на GitHub, и @Lyrkan предложил очень чистое и функциональное решение — функцию, которая возвращает объект конфигурации.

https://github.com/symfony/webpack-encore/issues/849

Я публикую здесь его решение на случай, если оно будет полезно для кого-то еще:

 const Encore = require('@symfony/webpack-encore');
const WebpackBar = require('webpackbar');
const path = require('path');

function getConfig({ outputPath, publicPath, name, color, entries }) {
    // Make sure we start fresh
    Encore.reset();

    Encore
        .setOutputPath(outputPath)
        .setPublicPath(publicPath)
        .addPlugin(new WebpackBar({
            name,
            color,
        }))
        .addAliases({
            "@": path.resolve(__dirname, "assets", "js"),
            styles: path.resolve(__dirname, "assets", "scss"),
            fonts: path.resolve(__dirname, "assets", "fonts"),
        })
        .enableVueLoader();

    for (const name in entries) {
        Encore.addEntry(name, entries[name]);
    }

    const config = Encore.getWebpackConfig();
    config.name = name;
    return config;
}

// FRONTEND CONFIGURATION
const frontend = getConfig({
    name: "Frontend",
    color: "blue",
    outputPath: "public/compiled/frontend/",
    publicPath: "/compiled/frontend",
    entries: {
        "frontend": "./assets/entries/frontend/frontend.js"
    }
});

// AGENCY CONFIGURATION
const agency = getConfig({
    name: "Agency",
    color: "green",
    outputPath: "public/compiled/agency/",
    publicPath: "/compiled/agency",
    entries: {
        "agency": "./assets/entries/agency/agency.js"
    }
});

module.exports = [frontend, agency];```