Greifen Sie über die Webpack-Konfiguration auf das Schema zu

Question

Ich habe den folgenden Code in webpack.config.js:

module.exports = {
    Eintrag: {
        Index: „./src/index.js“,
        Inhalt: „./src/content.js“
    },
    mode: „Produktion“, // Wie greife ich über den React-Code auf diesen Wert zu?
    devtool: 'inline-source-map',
    ...

Ich muss einen anderen Client für PayPal verwenden, je nachdem, ob mode 'development' ist ; ID (Sandbox oder reale Umgebung). Ich hoffe, Doppelarbeit zu vermeiden. Wie greife ich also über meinen React-Code auf diesen Wert zu?

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（或您所称呼的任何名称）来访问该环境变量。