时间戳

首页 > 解决方案 > 当我使用多种配置时，如何提取常见的 Encore 设置？

javascript - 当我使用多种配置时，如何提取常见的 Encore 设置？

问题描述

下午好！我的问题是如何将配置的公共部分应用到多个配置中。换句话说，我怎样才能使多个配置从一个通用配置扩展而来？

我提供了一个简化的 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();

标签： javascriptsymfonywebpack-encore

解决方案

我在 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];```

推荐阅读