How to disable in Webpack to rename of function names? TypeScript, Javascript

Question

How to disable in Webpack to rename of function names? I have got in my code this name of class:

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

But in compiled file the row becomes to unreadable string.

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

My question is: What is the option in Webpack that can to disable the change of class or functions name?

Answer 1

I am running into the same issue, the TerserPlugin pointed to by Andrew Mackie's link will address the issue, but is also a pretty heavy solution. One option would be changing how the optimization setting in webpack works. A convenient approach (without having given in huge thought) would be:

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

"compress" would remove white space but not mangle "preserve" would minimize but not mangle function and class names

Here is the Terser configuration for webpack.conf:

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