Building features on demand

What problem does this feature solve?

Build the application based on a set of a features instead of the current building environment.

I’m facing with a problem in the new @vue/cli. I want to create a staging environment for my company/application but I don’t find a nice way to do it without override lots of line of default webpack configuration file.

If I explicitly set the build mode (--mode staging), vue cli in fact gets the .env.staging environment variables BUT it builds the bundle with development features (for example, it doesn’t minify the code, it doesn’t extract the CSS, etc …)

Futhermore, if I build the bundle using this command, as the documentation recommends vue-cli-service build --mode development, it just not work without being served by internal vue dev-server. The static assets like images or icons are not being extracted out the bundle (I suppose this is intended behaviour) but my app.js is requesting images via HTTP that doesn’t exists in my distfolder.

What does the proposed API look like?

My proposal would be a way to abstract the core features available in @vue/cli to build against a set of required features instead of basing the build in the variable process.env.NODE_ENV

Of course, this behaviour can fallback in a pre-defined set of features by NODE_ENV if this list is not defined.

One example, vue.config.js:

...

webpackFeatures () {
    const features = [
      'pwa',
      'dll',
      'css-extract',
    ];
    
    if (process.env.NODE_ENV === 'production') {
      features.push('minification')
      features.push('css-purge')
    }
    
    return features
  }

...

If this becomes in something, in a future this could be a good approach to create plugins with features that encapsulate any webpack behaviour under a good readable name.

Of course, this is just a draft and the behaviour/api could change to adapt to the current code or whatever. I’m sure that I’m forgetting/not getting something into account, but I hope my idea is a bit more understandable.

Cheers.

[yyx990803]

You are supposed to add

NODE_ENV=production

Into your .env.staging. As the doc explains:

• mode !== env.
• Only NODE_ENV=production will result in a production oriented build, regardless of mode.
• Only production mode defaults to NODE_ENV=production. In any other mode, you need to explicitly set NODE_ENV to your desired value.

[LinusBorg]

If I explicitly set the build mode (--mode staging), vue cli in fact gets the .env.staging environment variables BUT it builds the bundle with development features (for example, it doesn’t minify the code, it doesn’t extract the CSS, etc …)

NODE_ENV=production vue-cli-service build --mode staging

…or set the NODE_ENV accordingly in the env file

Doesn’t that do what you want it to?

Futhermore, if I build the bundle using this command, as the documentation recommends vue-cli-service build --mode development, it just not work without being served by internal vue dev-server. The static assets like images or icons are not being extracted out the bundle (I suppose this is intended behaviour) but my app.js is requesting images via HTTP that doesn’t exists in my distfolder.

I don’t really understand this part.