Webpack5 ES5 Terser compression configuration is incorrect

[chenyulun]

Bug report

What is the current behavior?

Everything that can be configured is configured, but still cannot be converted to ES5

const path = require('path');

module.exports = {
  entry: './src/index.js',
  mode: 'production',
  target: ['web', 'es5'],
  output: {
    environment: {
      arrowFunction: false,
      const: false,
      destructuring: false,
      forOf: false
    },
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

input code

const abc =  {
  c() {
    return {cc: 1}
  }
}
console.log(abc)

output code

console.log({c:()=>({cc:1})}); // Hopefully there's no arrow function

Webpack target should actively configure Terser's options.compress.arrows = False if ES5 is present

terserOptions = {
  //...
compress: {
    ecma: 5,
    // ...
    arrows: false,
  },
  // ..
}

If the current behavior is a bug, please provide the steps to reproduce.
Error recurrence project
https://github.com/chenyulun/webpack5-test

yarn build

What is the expected behavior?
// Hopefully there's no arrow function

Other relevant information:
webpack version: 5.74.0
Node.js version: v16.15.1
Operating System: macOS 12.3.1
Additional tools: null

[vankop]

hm.. yeah, we defaults should be updated..

[chenyulun]

Has Webpack5 always had this problem? I've got other projects that don't have 'arrows:false' configured either, don't see why
When will it be fixed?

[alexander-akait]

We handle ecma here https://github.com/webpack-contrib/terser-webpack-plugin/blob/master/src/index.js#L490, so I will fix it on the plugin side

[chenyulun]

Check that all Terser configurations are ES5 compliant,
tks

[chenyulun]

Alternatively, it is recommended that the Terser compressor be compatible with an ESMA configuration of 5 without setting the arrows to False

[chenyulun]

test.mjs

import { minify } from "terser";

var code = `
(function() {
  var __webpack_exports__ = {};
var abc = {
  data() {
  return {
    a: 2
  };
}};
console.log(abc)
})();
`;
var result = await minify(code, { compress: { passes: 2 }, module: false, ecma: 5 }) // Webpack configuration of Terser
console.log(result.code); 

➜  node test.mjs
console.log({data:()=>({a:2})});

terser/terser#1241

[alexander-akait]

@chenyulun

Alternatively, it is recommended that the Terser compressor be compatible with an ESMA configuration of 5 without setting the arrows to False

I agree that at least the ecma option should be respected (ideally browserslist).

[alexander-akait]

@chenyulun Fix - webpack-contrib/terser-webpack-plugin#509 (swc affected too) + change ecma from 5 should enable more optimizations

[alexander-akait]

Anyway will be great if terser handle it too