Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support for multiple webpack configurations #2613

Open
thestonehead opened this issue Sep 26, 2018 · 7 comments
Open

Support for multiple webpack configurations #2613

thestonehead opened this issue Sep 26, 2018 · 7 comments

Comments

@thestonehead
Copy link

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
Copy link
Member

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
Copy link
Member

jkzing commented Oct 30, 2018

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
Copy link

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
Copy link

@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
Copy link

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
Copy link

y-nk commented Aug 31, 2019

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

@y-nk
Copy link

y-nk commented Sep 2, 2019

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"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

6 participants