从webpack配置中访问模式

Question

我在webpack.config.js中有以下代码：

module.exports = {
    entry: {
        index: "./src/index.js",
        content: "./src/content.js"
    },
    mode: "production",             // 如何从React代码中访问此值？
    devtool: 'inline-source-map',
    ...

根据mode是'development'还是'production'，我需要为PayPal使用不同的客户端ID（沙盒或真实环境）。我希望避免重复。那么，我如何从我的React代码中访问该值？

Answer 1

您可以通过将模块导出扩展为箭头函数来访问该模式。它是第二个参数（args）的一部分，我们可以解构。

module.exports = (env, { mode }) => {
  const isDevMode = mode === 'development';

  return {
     ...webpack配置在这里
   }
}

然后，您可以使用类似webpack.define的方法创建客户端环境变量，例如：

## 在webpack配置之前

const SOME_STUFF = {
  production: "a",
  development: "b"
};

const bakeEnvironmentValues = (values, mode) => {
  return values[mode];
};


## 在plugins中

 new webpack.DefinePlugin({
     SOME_ENV: JSON.stringify(
         bakeEnvironmentValues(SOME_STUFF, mode)
  )}),

然后，您可以通过在客户端JS中的任何位置引用SOME_ENV（或您所称呼的任何名称）来访问该环境变量。