当我使用多种配置时，如何提取通用的Encore设置？

问题描述

下午好！我的问题是我如何才能采用配置的公共部分并将其应用于多个配置。换句话说，如何从一个通用配置扩展多个配置？

我提供了简化的Encore配置来说明此问题。在我最初的webpack.config.js中，我还有5个配置，因此我要重复很多代码，它可以工作，但实际上并不能维护。

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,"scss"),fonts: path.resolve(__dirname,"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",})
    .enableVueLoader();

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

module.exports = [frontend,agency];

公共部分

// Common configuration
    .addAliases({
        "@": path.resolve(__dirname,})
    .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,}))
        .addAliases({
            "@": path.resolve(__dirname,"assets","js"),styles: path.resolve(__dirname,"scss"),fonts: path.resolve(__dirname,"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];```