时间戳

首页 > 解决方案 > webpack DefinePlugin 的功能到底是什么？

webpack - webpack DefinePlugin 的功能到底是什么？

问题描述

在阅读webpack config docs时，遇到了一些我无法完全理解的事情。

据我所知，我们可以DefinePlugin在编译（构建）时使用如下方式定义全局常量。

new webpack.DefinePlugin({
  PRODUCTION: JSON.stringify(true),
  VERSION: JSON.stringify('5fa3b9'),
  BROWSER_SUPPORTS_HTML5: true,
  TWO: '1+1'
});

正如我们在上面看到的用法，键不需要任何引号。

但是我们必须使用引号来启用或禁用功能标志，如下所示。

new webpack.DefinePlugin({
  'NICE_FEATURE': JSON.stringify(true),
  'EXPERIMENTAL_FEATURE': JSON.stringify(false)
});

我可能会猜测该功能标志是否类似于保留关键字。

但是我找不到 webpack 默认提供的功能标志列表。

那么该功能标志到底是什么？为什么在启用/禁用功能标志时我们需要在键周围使用这些引号？

提前致谢。

标签： webpack

解决方案

DefinePlugin是一个插件，它用配置的值替换你的包中的变量。

它接受常规 POJO（普通旧 JavaScript 对象），这意味着适用于 POJO 的所有规则都应适用于配置对象。

实际上，

new webpack.DefinePlugin({
  NICE_FEATURE: JSON.stringify(true),
  EXPERIMENTAL_FEATURE: JSON.stringify(false)
});

也是一个有效的对象配置。

如果您的变量名称将包含对象键的任何无效字符，则应将其用引号括起来。

例如，of 的常见用法DefinePluin是替换process.env.NODE_ENV为它的值。由于该.字符不是 JS 中对象键的有效字符，因此应使用引号对其进行扭曲。

new webpack.DefinePlugin({
  'process.env.NODE_ENV': JSON.stringify(true),
// --------------------^
});

“令人困惑”的部分DefinePlugin是它需要一个有效的字符串作为值，因为它替换了包中的变量。

考虑到您的值中有引号（比如说，company name with "），因此，它的有效字符串应该是"company name with \""，为了实现这个值，通常 ppl 使用JSON.stringify它来转义任何与 json 相关的字符，其中一个是"char。

希望能帮助到你 ：]

推荐阅读