Accéder au schéma à partir de la configuration du webpack

Question

J'ai le code suivant dans webpack.config.js :

module.exports = {
    entrée : {
        index : "./src/index.js",
        contenu : "./src/content.js"
    },
    mode : "production", // Comment accéder à cette valeur depuis le code React ?
    outil de développement : 'carte-source-en-ligne',
    ...
≪/pré>
Je dois utiliser un client différent pour PayPal selon que le mode est 'development' ; ID (bac à sable ou environnement réel). J'espère éviter les doubles emplois. Alors, comment accéder à cette valeur depuis mon code React ? 
            

Answer 1

Vous pouvez accéder à ce mode en étendant les exportations de modules sous forme de fonctions fléchées. Cela fait partie du deuxième argument (args) que l'on peut déconstruire.

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

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

Vous pouvez ensuite créer des variables d'environnement client en utilisant quelque chose comme webpack.define, par exemple :

## 在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)
  )}),

Vous pouvez ensuite accéder à cette variable d'environnement en référençant SOME_ENV (ou quel que soit votre nom) n'importe où dans votre client JS.