Support for multiple webpack configurations

[thestonehead]

What problem does this feature solve?

For my application, I need support for color schemes. I have solved this by using scss file with variables that gets imported wherever there's a need for color. E.g. variables.ThemeA.scss and variables.ThemeB.scss are color schemes supported. Then it's just a matter of linking to one or another at runtime.
Before vue-cli, this was resolved using webpack support for multiple configurations (https://webpack.js.org/configuration/configuration-types/#exporting-multiple-configurations). After vue-cli this can't be solved as vue.config.js works only with a single configuration.

Current workaround is doing this in package.json:
"buildThemes": "set VUE_THEME=ThemeA && vue-cli-service build && set VUE_THEME=ThemeB && vue-cli-service build --no-clean",
And then using that environment variable in vue.config.js configureWebpack() method.

What does the proposed API look like?

Support for returning an array in configureWebpack method in vue.config.js

configureWebpack: config => {
       // code that alters config1 and config2 based on config argument...
       return [config1, config2]
}

[LinusBorg]

It should be possible to implement this in a functional way as a plugin in userland.

I'm not sure that we should add this to the Core build process since I'm afraid it would take a pretty big refactoring to get it into the build process en par with the other options, in my eyes.

[jkzing]

I had the same need in a real world project. What I did is tweak the webpack configuration into multiple configs after it is resolved by vue cli. It's simple but a bit hacky.

I have extracted my usage into a plugin in case anyone needs: vue-cli-plugin-multi-compiler.

More details can be found in that repo.

[canonic-epicure]

I have exactly the same need, trying to transpile my test files, each of them requires individual webpack entry (to be standalone). Previously I've solved that by using multiple Webpack configs, but now I'm puzzled. Going to try the @jkzing plugin.

[canonic-epicure]

@jkzing 's plugin works great. However, as mentioned here jkzing/vue-cli-plugin-multi-compiler#1, the serve command of vue-cli assumes webpack config is an object.

If that is the only place where such assumption is made (the plugin works fine in production build), then its not such a big change to sources. @LinusBorg Please consider adding this feature, or, can you give recommendations how to implement it in userland for development builds?

[robertmain]

Just adding my two cents here to say that I'm trying to use webpack to bundle my server-side code into server.js and have it serve up my client. It would be nice to have webpack do this, but that is made considerably more difficult by the fact that a lot of the webpack code is abstracted away into vue-cli-service.

[y-nk]

still no luck about @vue/cli's serve supporting multiple configuration?

[y-nk]

I've been trying using multiple config using serve, hacking around serve to make the default returns an array. "single config can be an array of length 1" i thought.

but there are several implications in vue-loader checking for config, looking for appropriate loader. as i don't know the strategy behind this and can't find documents justifying for such... i guess we have not choice but to say "it's impossible to do so ; it's a limitation of @vue/cli"