Why should I use JSON.stringify assignment to set environment variables in Webpack?

Code first: 

const merge = require("webpack-merge");
const UglifyJSPlugin = require("uglifyjs-webpack-plugin");
const common = require("./webpack.common.js");
const webpack = require("webpack");
module.exports = merge(common, {
   mode: "production",
   devtool: "source-map",
   plugins: [
       new UglifyJSPlugin({
           sourceMap: true
       }),
       // **"production",JSON**
       new webpack.DefinePlugin({
           "process.env.NODE_ENV": JSON.stringify("production"),
       })
   ]
});
That"s the problem with

. Why not just assign a string "production" to , but convert it to a string like JSON instead? 

      new webpack.DefinePlugin({
          "process.env.NODE_ENV": JSON.stringify("production"),
      })

A problem encountered by a front-end rookie when he went to see the official website. Here is the ides/production/-sharp%E6%8C%87%E5%AE%9A%E7%8E%AF%E5%A2%83" rel=" nofollow noreferrer "> link . Figure it out, why do you need to do this?

Javascript
Nov.09,2021

suppose you have the following code 

if (process.env.NODE_ENV === 'production') {
    console.log('production');
}

if you write in this way, 

new webpack.DefinePlugin({
    'process.env.NODE_ENV': 'production',
})

will be compiled into: 

// production
if (production === 'production') {
    console.log('production');
}

so, you need to write 

new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify('production'),
})

or this 

new webpack.DefinePlugin({
    'process.env.NODE_ENV': '"production"',
})

this plug-in replaces the process.env.NODE_ENV direct text and produces production = 'production' . In fact, the effect we want is
' development' = 'developmemt' or ' production' = 'production'

.
Note that because the plugin does a direct text replacement, the value given to it must include actual quotes inside of the string itself. Typically, this is done either with either alternate quotes, such as'"production"', or by using JSON.stringify ('production').

Previous: Problems with Vue child components cycling and receiving parent component values

Next: What are the advantages and disadvantages of React state management library React-thunk,React-redux,React-saga,dva?

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