为什么在构建 webpack 时没有替换箭头函数

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({}),
            ]
        },
    })
]

[构建结果]

/***/ 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();

/***/ })

箭头函数不会在构建结果中被覆盖。是什么原因？

我尝试了几件事，但箭头功能没有被替换

我的代码用 babel 替换为 es5 语言，但只有那部分没变。

如果你有什么好的方法，请告诉我

为什么？

Answer 1

您可以尝试将arrowFunction: false 配置添加到output.environment。

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