How to disable webpack minification for classes names

Question

I use jasmine, karma and webpack to test my module. The webpack preprocesses my tests files before initiating tests.

In my tests I have the class Name{...} to be tested. I create new Name instance and then, in my tests I expect(myInstance.constructor.name).toBe("Name")

class Name{}

const myInstance = new Name();

describe("The object",function(){
  it("should be the instance of Name class",function(){
    expect(myInstance.constructor.name).toBe("Name");  // Expected 't' to be 'Name'.
  })
});

But it returns failed tests. I figured out that my Name class is parsed by webpack to the t class in the bundled file and myInstance.constructor.name equals "t".

Can I prevent webpack to change the names of classes/constructors?

Answer 1

Have a build setup for development and production separately, whenever in development mode(which you can mention in the webpack config object), don't apply minification plugin(might be there in your webpack config).

Help links:

1. Bundling Modes
2. Minification pluin

You can use 'keep_classnames' option provided by the minification plugin to keep the class names intact.

Answer 2

Install Terser Plugin to customize Webpack optimization > minimizer options running:

npm i -D terser-webpack-plugin

...or in the case you use yarn:

yarn add -D terser-webpack-plugin

Then add this optimization option inside webpack.config.js:

module.exports = {
  mode: ...,
  resolve: ...,
  target: ...,
  optimization: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          keep_classnames: true,
        },
      }),
    ],
  },
};