Webpack的define插件：未定义变量

Question

我正在尝试使用Webpack的DefinePlugin将一些与环境相关的变量传递到我的React组件中。客户端部分工作正常，服务器端部分返回'MYVARIABLE未定义'。

我正在使用Webpack的Node.JS api。重要部分如下。难道我做错了什么？感谢

webpack.config.js

...
webpackConfig.plugins = [
  new webpack.DefinePlugin({
    MYVARIABLE: 'test-value'
  })
]
...

server.js

...
import webpack from 'webpack'
import webpackConfig from '../config/webpack.config'
...
var compiler = webpack(webpackConfig)
...

组件文件

...
console.log(MYVARIABLE)
...

结果

ReferenceError: MYVARIABLE is not defined
....

Answer 1

你必须使用JSON.stringify（'your-value'）。

根据https://webpack.js.org/plugins/define-plugin/：

  

因为插件执行了直接文本替换，所赋予的值   它必须包含字符串本身内部的实际引号。通常情况下，   这可以使用其他引号完成，例如   '“production”'，或者使用JSON.stringify（'production'）。

所以 webpack.config.js 应该是......

webpackConfig.plugins = [
 new webpack.DefinePlugin({
  MYVARIABLE: JSON.stringify('test-value')
 })
]

Answer 2

当然，您应该访问该值：

webpackConfig.plugins.forEach((plugin) => {
    if (plugin.MYVARIABLE !== undefined)
        console.log(plugin.MYVARIABLE);
});

如果webpack.DefinePlugin允许您访问此值，我不确定是否依赖。

如果您需要，可以将其定义为const并导出。