Disabling function name renaming in Webpack for TypeScript and Javascript files

Is there a way to prevent Webpack from renaming function names? I have a class named MenuBlocksMenuPage in my code:

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

However, the compiled file turns this line into an unreadable string.

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

My question is: Which option in Webpack can disable the renaming of classes or functions?

Answer №1

Encountering the same issue as well, I found a potential solution in the TerserPlugin linked by Andrew Mackie. However, this approach may be considered too heavy for some cases. An alternative could involve tweaking the optimization settings in webpack. A quick and easy adjustment (without delving deeply into it) might look something like:

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

The options would work as follows: - "compress" removes white space but doesn't obfuscate code - "preserve" minimizes code without altering function and class names

Below is an example of how Terser can be configured in webpack.conf:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjust image loading according to screen dimensions

I am working on HTML code that currently displays an image. The code looks like this: <div> <img id="wm01" alt="PP" title="PP" u="image" src="theImages/wm01.jpg" /> </div> My goal is to show a different image based on the screen si ...

View hyperlinks within a designated DIV container

I have a menu wrapped in a DIV element and I want to open the links from the menu in another DIV called TEST. So far, the only method I've found is using an iframe, but I'm looking for another solution, possibly with JavaScript (without using AJA ...

Order of execution for Angular 2 components

import { Component, OnInit } from '@angular/core'; import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms'; import {Router, ActivatedRoute, Params} from '@angular/router'; import { Country } from &ap ...

"The server responded with a 405 error message indicating that the requested method

I have been working on a registration form project using HTML, JS, NodeJS, and SQLite. However, I am encountering an issue with the fetch function when trying to post the inputted information into the database. I keep receiving a POST 405 (Method Not Allo ...

What is the best way to determine if a local storage key is not present?

By applying the if condition below, I can determine whether or not the local storage key exists: this.data = localStorage.getItem('education'); if(this.data) { console.log("Exists"); } To check for its non-existence using an if conditi ...

Why is there an issue with the way I am defining this Javascript variable?

In my JavaScript file, milktruck.js, I have defined an object called TruckModel. My goal is to create an array of TruckModel objects because in my multiplayer game, I cannot predict how many players will enter or exit at any given time. The issue I am fa ...

Merge HTML code with JavaScript from Fiddle

There was a similar inquiry posed in this specific forum thread, however, I am encountering difficulties converting the code from JSfiddle to HTML. You can access the JSfiddle example through this link: here. I attempted to apply the suggested technique ...

Tips for looping through each cell in a column of a DataTable to verify its content

I have a table generated using the jquery DataTables API. One of the columns displays word frequencies for each word in the table. If a frequency is less than 40, I want to change that cell to display "unranked" instead of the actual number. How can I ite ...

Creating a function in PHP without immediately running it

Currently, I am in the process of creating an advertising module for a customized CMS. This involves using template tags to allow customers to easily add advertisements into their page content through a WYSIWYG editor. For example: {=advert_1} On the fro ...

What is the correct way to pass an array to a function in C if I intend to modify its contents?

Despite my efforts to search online, I still find myself confused about working with arrays in C. What I am struggling with is creating an array in the main function and then using it in another function. Specifically, I want to write something to the ar ...

Tips for managing local storage asynchronously

I have two files in my TypeScript application, namely: File 1 and File 2, In File 1, I want to save a value in local storage like this: private load() { return this.entityService .load(this.$scope.projectRevisionUid) ...

Disable sorting options in the Datatable ColumnFilterWidget

I'm currently working with datatables ColumnFilterWidget and I'd like to prevent the widget from sorting the values displayed in the select box. Despite trying the "bSort": false option of the ColumnFilterWidget, it doesn't seem to have any ...

Having difficulty getting the sign operator to show up in a text field

Whenever the ADD div is clicked, "+" should be displayed on the textbox. The same goes for SUBTRACT, MULTIPLY, and DIVIDE. However, I am struggling to make the operators show on the textbox. Here is what I have managed to come up with so far. <!D ...

Determine if localStorage is set using jQuery

There is a text on the page inside a div with the id clicker. When this div is clicked, the localStorage value should toggle between 1 and 0. I have provided an example in this JSFiddle link. Although it seems to be working by toggling the value, there ar ...

JavaScript Geocoding does not initiate the search process

Currently in the process of moving some Google Maps functions to a separate file. In my main file, I have a function search() that sets up a workflow with the other file included. The issue I'm facing is with the geocoder.geocode() function, which was ...

javascript floating point calculation

Can anyone help me with calculating float values in JavaScript? Here is a snippet of my code: var d_val = 0.00; $.each($('.prices a b'), function(index,obj){ d_val = parseFloat( $(obj).text().replace( '€', '' ) ); ...

Updating a Mongoose model with a dynamically generated field name

I am attempting to pass a field name as a variable, but here is the code I tried and it isn't working: var update = {}; update[req.body.field] = req.body.value; Model.update( {"email": req.user.email}, {$set: {update}}, function (err, suc ...

The resume button is failing to activate any functions

I recently encountered an issue with a JS file that is associated with a Wordpress Plugin, specifically a Quiz plugin featuring a timer. I successfully added a Pause and resume button to the quiz, which effectively pauses and resumes the timer. However, I ...

An array is not just a mere collection of elements

I have an object that resembles an array var items = [ { started_time: 2017-05-04T12:46:39.439Z, word: 'bottle', questionId: '161013bd-00cc-4ad1-8f98-1a8384e202c8' }, { started_time: 2017-05-04T12:47:26.130Z, word: &apo ...

Node.js client-side code

Hi all, I am currently exploring Nodejs and experimenting with setting up a server-client connection using sockets. The server side seems to be functioning properly, but I am encountering some difficulties with the client side connection. I would appreciat ...