如何解决当我使用多种配置时,如何提取通用的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];```
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。