如何在 Vue 3.0 和 Webpack 中使用 Bundler Build Feature Flags？

Question

Vue 3.0（现在稳定）有一个未公开的功能Bundler Build Feature Flags：

从 3.0.0-rc.3 开始，esm-bundler 构建现在公开可以在编译时覆盖的全局功能标志：

VUE_OPTIONS_API（启用/禁用选项 API 支持，默认值：true）

VUE_PROD_DEVTOOLS（在生产中启用/禁用开发工具支持，默认值：false）

构建将在不配置这些标志的情况下工作，但是强烈建议正确配置它们以便在最终包中获得适当的 tree-shaking。要配置这些标志：

webpack：使用定义插件

汇总：使用@rollup/plugin-replace

Vite：默认配置，但可以使用定义选项覆盖

注意：替换值必须是布尔文字，不能是字符串，否则打包器/压缩器将无法正确评估条件。

如何使用 vue.config.js 和 Webpack 实际配置这个构建标志？

尝试过这种方式，但它似乎不会影响供应商捆绑包的大小，还是应该仅适用于生产版本（目前无法尝试，因为有一个 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,
    }),
  ],
};