javascript - 如何在 Vue 3.0 中通过 Webpack 使用 Bundler Build Feature Flags？

Question

Vue 3.0(现已稳定)有一个未记录的功能 Bundler Build Feature Flags :

Starting with 3.0.0-rc.3, esm-bundler builds now exposes globalfeature 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 orderto get proper tree-shaking in the final bundle. To configure theseflags:

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 bestrings, otherwise the bundler/minifier will not be able to properlyevaluate the conditions.

如何使用 vue.config.js 和 Webpack 实际配置此构建标志？
尝试过这种方式，但它似乎不会影响 vendor bundle 的大小，或者它是否应该仅适用于生产版本(目前无法尝试，因为有一个 vue-loader 错误破坏了我的产品版本)？

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

你写的几乎是正确的。只需删除 configureWebpack键并像任何其他插件一样定义它。

const webpack = require('webpack');

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