How does the front end judge environmental variables?

I use webpack4 and then the config folder in the project contains dev.config.json and prod.config.json . I want to control which configuration file is introduced through environment variables at the front end. Here"s what I"m doing right now, as follows:

in this way, it is feasible for me to practice. I want to know how webpack is compiled when it is compiled. I only see that the corresponding files are actually introduced in the compiled files. Attach the compiled code of webpack: 

"use strict";
eval("\n\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar config = {};\nif (true) {\n    config = __webpack_require__(/*! ./dev/config.dev.json */ \"./config/dev/config.dev.json\");\n} else {}\nexports.default = config;//-sharp sourceURL=[module]\n//-sharp sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9jb25maWcvY29uZmlnLnRzLmpzIiwic291cmNlcyI6WyJ3ZWJwYWNrOi8vLy4vY29uZmlnL2NvbmZpZy50cz9kODk3Il0sInNvdXJjZXNDb250ZW50IjpbIlwidXNlIHN0cmljdFwiO1xuXG5PYmplY3QuZGVmaW5lUHJvcGVydHkoZXhwb3J0cywgXCJfX2VzTW9kdWxlXCIsIHsgdmFsdWU6IHRydWUgfSk7XG52YXIgY29uZmlnID0ge307XG5pZiAocHJvY2Vzcy5lbnYuTk9ERV9FTlYgPT09ICdkZXZlbG9wbWVudCcpIHtcbiAgICBjb25maWcgPSByZXF1aXJlKCcuL2Rldi9jb25maWcuZGV2Lmpzb24nKTtcbn0gZWxzZSB7XG4gICAgY29uZmlnID0gcmVxdWlyZSgnLi9wcm9kL2NvbmZpZy5wcm9kLmpzb24nKTtcbn1cbmV4cG9ydHMuZGVmYXVsdCA9IGNvbmZpZzsiXSwibWFwcGluZ3MiOiJBQUFBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBLFNBRUE7QUFDQSIsInNvdXJjZVJvb3QiOiIifQ==\n//-sharp sourceURL=webpack-internal:///./config/config.ts\n");

/***/ }),

/***/ "./config/dev/config.dev.json":
/*!************************************!*\
  !*** ./config/dev/config.dev.json ***!
  \************************************/
/*! exports provided: target, default */
/***/ (function(module) {

eval("module.exports = {\"target\":\"http://192.168.2.99:8101\"};//-sharp sourceURL=[module]\n//-sharp sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9jb25maWcvZGV2L2NvbmZpZy5kZXYuanNvbi5qcyIsInNvdXJjZXMiOltdLCJtYXBwaW5ncyI6IiIsInNvdXJjZVJvb3QiOiIifQ==\n//-sharp sourceURL=webpack-internal:///./config/dev/config.dev.json\n");

/***/ }),

help me answer thank you, I do not know how to use this method to determine whether the environment variable is correct at the front end, please advise.

Webpack4 webpack javascript
Sep.06,2021

Webpack Mode

Webpack4 will automatically set the corresponding NODE_ENV according to the mode you set.

find out how every time I ask a question, I have to answer it myself. Looks like my problem is so retarded.
so, Emmmmmmm~~ Here is my answer.
found someone using this method to implement

on stackoverflow. 
plugins: [
    new webpack.DefinePlugin({
        ENV: require(path.join(__dirname, './path-to-env-files/', env))
    })
]
// Settings file located at `path-to-env-files/dev.js`
module.exports = { debug: true };

// and then this in your code
if (ENV.debug) {
    console.log('Yo!');
}

but it doesn't seem to work after I have implemented it. I can't export the data of the file to webpack. I don't know if my tsc caused it

.

then I just export the environment variables to the front end for judgment. 

new webpack.DefinePlugin({
   'process.env': {
      NODE_ENV: process.env.NODE_ENV ? JSON.stringify(process.env.NODE_ENV) :             
        JSON.stringify('development')
    }
})

then directly perform process.env.NODE_ENV at the front end to determine the current environment variables.

Previous: How to modify the support for Chinese name registration

Next: According to the dictionary table, dynamically configure the drop-down box in the form to check box login what should be paid attention to

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu