Arrow function not substituted when building webpack why

Question

{
  "name": "www_webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack --config webpack.prod.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/preset-env": "^7.12.7",
    "babel-loader": "^8.2.2",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^5.0.1",
    "mini-css-extract-plugin": "^1.3.2",
    "optimize-css-assets-webpack-plugin": "^5.0.4",
    "sass-loader": "^10.1.0",
    "terser-webpack-plugin": "^5.0.3",
    "webpack": "^5.10.0",
    "webpack-cli": "^4.2.0",
    "webpack-merge": "^5.4.0"
  },
  "dependencies": {}
}

[webpack.common.js]

const path = require('path');

module.exports = {
    mode: 'production',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js',
        publicPath: '/',
        libraryTarget: "umd",
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader?presets[]=es2015',
                    options: {
                        presets: [
                            '@babel/preset-env',
                        ]
                    }
                }
            },
        ]
    }
}

[webpack.prod.js]

const path = require('path');
// webpack-merge 플러그인 추가
const { merge } = require('webpack-merge');
// webpack 공통 설정 추가
const common = require('./webpack.common.js');
// clean-webpack-plugin 추가
const TerserJSPlugin = require('terser-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = [
    merge(common, {
        entry: {
            "main": path.resolve(__dirname, 'src/main.js'),
        },
        optimization: {
            minimize: false
        }
    }),
    merge(common, {
        entry: {
            "main.min": path.resolve(__dirname, 'src/main.js'),
        },
        optimization: {
            minimizer: [
                new TerserJSPlugin({}),
                new OptimizeCSSAssetsPlugin({}),
            ]
        },
    })
]

[build result]

/***/ 880:
/***/ (() => { // Why is the arrow guaranteed not to disappear?

function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }

function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }

var a = 1;

function s() {
  return _s.apply(this, arguments);
}

function _s() {
  _s = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
    return regeneratorRuntime.wrap(function _callee$(_context) {
      while (1) {
        switch (_context.prev = _context.next) {
          case 0:
            _context.next = 2;
            return console.log(a);

          case 2:
          case "end":
            return _context.stop();
        }
      }
    }, _callee);
  }));
  return _s.apply(this, arguments);
}

s();

/***/ })

Arrow functions are not overridden in build results. What's the reason?

I have tried several things, but the arrow functions are not replaced

My code is replaced by the es5 language with babel, but only that part is unchanged.

If you have any good way, please let me know

why?

Answer 1

You can try adding the arrowFunction: false configuration to output.environment.

module.exports = {
  ...
  output: {
    ...
    environment: {
      arrowFunction: false,
    },
    ...
  },
  ...
};