Webpack中设置环境变量为何要用JSON.stringify赋值？

Question

先上代码：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'),        })    ] });问题就出在这,为何不直接赋值一个字符串"production",而要用JSON这样转成字符串？      new webpack.DefinePlugin({          'process.env.NODE_ENV': JSON.stringify('production'),       })前端菜鸟去看官网的时候遇到的一个问题,这里是链接。求解一下，为何需要这样做？

Answer 1

假设有如下代码

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

这样写的话，

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

会编译成:

// production是一个变量，并不是我们想象中的字符串if (production === 'production') {    console.log('production');
}

所以，需要这么写

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

或者这样

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