How use Bundler Build Feature Flags in Vue 3.0 with Webpack?

Question

Vue 3.0 (now stable) has an undocumented feature Bundler Build Feature Flags:

Starting with 3.0.0-rc.3, esm-bundler builds now exposes global feature flags that can be overwritten at compile time:

VUE_OPTIONS_API (enable/disable Options API support, default: true)

VUE_PROD_DEVTOOLS (enable/disable devtools support in production, default: false)

The build will work without configuring these flags, however it is strongly recommended to properly configure them in order to get proper tree-shaking in the final bundle. To configure these flags:

webpack: use DefinePlugin

Rollup: use @rollup/plugin-replace

Vite: configured by default, but can be overwritten using the define option

Note: the replacement value must be boolean literals and cannot be strings, otherwise the bundler/minifier will not be able to properly evaluate the conditions.

How to actually configure this build flag using vue.config.js and Webpack?

Tried this way but it doesn't seem to affect the vendors bundle size, or is it supposed to work with production builds only (can't try currently as there is a vue-loader bug breaking my prod builds)?

const webpack = require('webpack');

module.exports = {
  configureWebpack: {
    plugins: [
      // Define Bundler Build Feature Flags
      new webpack.DefinePlugin({
        // Drop Options API from bundle
        __VUE_OPTIONS_API__: false,
      }),
    },
  },
};

Answer 1

You can get info in this file: node_modules/@vue/cli-service/lib/config/base.js

  // feature flags <http://link.vuejs.org/feature-flags>
  webpackConfig
    .plugin('feature-flags')
      .use(require('webpack').DefinePlugin, [{
        __VUE_OPTIONS_API__: 'true',
        __VUE_PROD_DEVTOOLS__: 'false'
      }])

So config vue.config.js like this:

module.exports = {
 chainWebpack: config =>
   config.plugin('feature-flags').tap(args => {
     args[0].__VUE_OPTIONS_API__ = JSON.stringify(false)
     return args
   })
}

Or:

chainWebpack: config =>
  config
    .plugin('feature-flags')
    .use(require('webpack').DefinePlugin, [{
      __VUE_OPTIONS_API__: 'true',
      __VUE_PROD_DEVTOOLS__: 'false'
    }])

Answer 2

What you wrote is almost correct. Just delete the configureWebpack key and define it like any other plugin.

const webpack = require('webpack');

module.exports = {
  plugins: [
    // Define Bundler Build Feature Flags
    new webpack.DefinePlugin({
      // Drop Options API from bundle
      __VUE_OPTIONS_API__: false,
    }),
  ],
};