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?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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.