如何在Webpack中禁用函数名的重命名？TypeScript，JavaScript

Question

如何在Webpack中禁用对函数名称的重命名？ 我的代码中有一个类的名称：

import { MenuBlocksMenuPage } from "../pages/menu/blocks/menupage";

但是在编译后的文件中，该行变成了无法阅读的字符串。

/* harmony import */ var __WEBPACK_IMPORTED_MODULE_73__pages_menu_blocks_menupage__ = __webpack_require__(669);

我的问题是：Webpack中有哪个选项可以禁用类或函数名称的更改？

- Alexander Zakusilo

Answer 1

我遇到了同样的问题，Andrew Mackie提供的链接中指向的TerserPlugin可以解决该问题，但这也是一个相当重的解决方案。其中一个选择是改变webpack中优化设置的方式。一种方便的方法（没有经过深思熟虑）是：

optimization: {
  minimize: true|false|"compress"|"preserve"
}

"压缩"会移除空格但不会篡改代码；"保留"会最小化函数和类名称但不会篡改它们。

以下是webpack.conf的Terser配置:

optimization: {
    minimize: true,
    minimizer: [
        new TerserPlugin({
            terserOptions: {
                keep_classnames: true,
                keep_fnames: true
            }
          })
        ]
  },

- AnyWhichWay

---

我发现这个 WebPack 文档页面非常有帮助，除了上面的提示之外，还可以正确配置 TerserPlugin： https://webpack.js.org/configuration/optimization/#optimizationminimizer - Oliver Schafeld