Access schema from webpack config

Question

I have the following code in webpack.config.js:

module.exports = {
    entry: {
        index: "./src/index.js",
        content: "./src/content.js"
    },
    mode: "production", // How to access this value from React code?
    devtool: 'inline-source-map',
    ...

I need to use a different client for PayPal depending on whether mode is 'development' or 'production' ID (sandbox or real environment). I hope to avoid duplication. So, how do I access this value from my React code?

Answer 1

You can access this mode by extending the module export as an arrow function. It's part of the second argument (args) that we can deconstruct.

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

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

Then you can create client environment variables using something like webpack.define, for example:

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

You can then access that environment variable by referencing SOME_ENV (or whatever you call it) anywhere in your client JS.