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,
      }),
    },
  },
};

score 8 · Answer 1 · edited Dec 11 '20 at 08:10

8

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,
    }),
  ],
};

edited Dec 11 '20 at 08:10

Vahid Amiri

10,769
13
68
113

answered Oct 08 '20 at 05:04

kyrylo

1,691
1
15
22

2

The OP provided [`vue.config.js`](https://cli.vuejs.org/config/#vue-config-js), which uses `configureWebpack`. – tony19 Oct 08 '20 at 08:01
1

As @tony19 mentioned, [vue.config.js includes configureWebpack](https://cli.vuejs.org/config/#configurewebpack) but not `plugins`. – ux.engineer Oct 08 '20 at 11:55
Isn't `configureWebpack` a vue-cli thing? So just providing `plugins` directly would be the approach for a non-cli config file? https://cli.vuejs.org/guide/webpack.html Correct me if im wrong please – redfox05 Feb 25 '21 at 18:03
@redfox05 Yes, outside of Vue CLI scaffolded projects, you'd use a Webpack config file (e.g., `webpack.config.js`), but the OP indicated that they're using `vue.config.js`, which has its own API to configure the underlying Webpack build. The `configureWebpack` option is passed directly to `webpack`, so `plugins: [/*...*/]` would go under that key. The OP seems to be using the option correctly. – tony19 Apr 27 '21 at 21:47
@tony19 yes thanks, that's what I mean too. I wasn't too clear but I was basically saying the answer these comments are on is wrong, as it relates to non-webpack, not what the OP needs. – redfox05 Apr 29 '21 at 07:02
This does not make the errors go away in code sandbox's vue 3 template https://codesandbox.io/s/noisy-vue-3-js-errors-xi3xi – Ray Foss Jul 07 '21 at 20:23

Dreamoon · Answer 2 · 2021-08-06T03:14:47.023

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'
    }])

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

2 Answers2