一句话原因，受到开发环境下webpack的默认值影响

答：Webpack4之后的版本里（截止至2021年5月9日，版本为v5），根据 mode，webpack自动地添加了一些配置项。
【其中包括了——mode为 none/development 对JS代码压缩的默认关闭】

  1. minimize: false,

链接)
image.png
image.png

有一说一，这里我们还能发现 dev 是有默认开启 sourceMap 的（devtool: ‘eval’）

解决方案：显示开启

将 minimize 设置为 true 就可以实现在 none/development 模式下，对 JS 压缩/优化的开启了。

很简单的解决方案，如果我有好好看文档的话。

  1.   optimization: {
  2.     minimize: true,
  3.     minimizer: [
  4.       new uglifyJSPlugin({
  5.         uglifyOptions: {
  6.           mangle: false,
  7.           output: {
  8.             beautify: true,
  9.           }
  10.         }
  11.       })
  12.     ]
  13.   }

上述配置做的事情：不混淆变量（mangle)、不压缩代码(beautify)、删除注释(minimize) 效果如下： image.png

关于 mangle 开关的区别

image.png

它把 webpack 默认的代码给混淆了。