What is the reason behind webpack generating JavaScript output as a string and utilizing the eval function for its deployment?

Here is the content of my webpack.config.js file:

var path = require('path');
var webpack = require('webpack');
var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
var autoprefixer = require('autoprefixer');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var ENV = process.env.npm_lifecycle_event;
var isTest = ENV === 'test' || ENV === 'test-watch';
var isProd = ENV === 'build';

module.exports = function makeWebpackConfig() {
  var config = {};
  // Rest of the configuration settings goes here...

When I run commands like webpack or webpack -p, it generates three files. However, all these files contain output as strings and use eval function for deployment. One file in particular has a large size (7MB) as shown in the image below: https://i.sstatic.net/Js3hb.png

I am looking to simplify the JavaScript files without using eval inside them, similar to how other common minification libraries work. Additionally, I would like to reduce the size of the vendor file.

Answer №1

Your default configuration includes the following:

config.devtool = 'eval-source-map';

The detailed manual explains:

eval-source-map - Each module is executed with eval and a SourceMap is added as DataUrl to the eval.

If you prefer not to have this, consider using a different devtool option.

To reduce code size, you may want to disable source map creation entirely (simply leave out the devtool option) or have Webpack save the source map to a separate file (devtool : 'source-map' or devtool : 'cheap-source-map', AFAIK).

Don't forget to set the NODE_ENV environment variable to production for smaller code:

# if you're on a Unix-like OS:
env NODE_ENV=production webpack -p

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

Restrict User File Uploads in PHP

I have a system set up that enables users to upload files under 200 MB. Once the file is downloaded once, it will be automatically deleted. Additionally, all files are deleted from the server after 24 hours. I am looking for a way to limit the number of up ...

Even though `return false` is called, the line of code is still being executed

I am looking for a way to validate user input details before submitting them to the database. I have multiple tabs in a form and one common save button that triggers a save function when clicked, as shown below; $scope.saveFn = function () { $("#activ ...

Angular 6 CSS spacing dilemmas

We recently made the switch from Angular 5 to Angular 6 and noticed that there is no spacing between the buttons/icons, etc. We are looking to bring back the spaces between the buttons and icons. I have recreated the issue below. As you can see in the Ang ...

A different approach to database monitoring instead of using setInterval() - Meteor.js

To create a scroll-down message feed when the number of records changes or when a new message is inserted into the document, the approach needs to be simple and efficient. Instead of using setInterval to continuously check for database changes, we can con ...

AJAX does not execute all inline JavaScript code

I am currently using AJAX to load a fragment of a document. I have successfully loaded 'external' scripts, but I am encountering issues when trying to execute all the JavaScript within <script> tags. Below is an example of the HTML fragmen ...

My Jquery "animate" is only triggered once instead of on each function call. What could be causing this issue?

I have set my navigation to dock at a specific document height on the top of the viewport, and when it docks, it should display a dropdown animation. $(document).scroll(function(){ var x = $(window).scrollTop(); if(x>=700){ $("header ...

What is the method for retrieving profile data using Google Oauth2 passport?

Display the name of the currently logged-in user in the footer of the index page. Google login routes router.get("/login/google", passport.authenticate('google', { scope: [ 'email', 'profile' ] })); router.get("/login/go ...

The plus sign ('+') fails to be matched by the regular expression in Angular 2, although it functions correctly in other testing environments

Check out this code snippet: export const PASSWORD_PATTERN: RegExp = /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])[a-zA-Z0-9`~!@#$%^&*()\-_+={[}\]|\\:;"'<,>.?/]{8,}$/; This constant is utilized in the following manner elsewhere: ...

Ways to switch the class of the nearest element

When an image within the .process class is clicked, I am using the following code to toggle the class of .process-info to .process--shown. The code successfully toggles the class; however, it affects all elements on the page with the class of .process-inf ...

Reverse the Shuffle Effect in jQuery Isotope

var elements = $grid.isotope('getFilteredItemElements') //Randomize items when total elements are greater than 13. if (elements.length >= 13) { RandomizeBlocks(); } function RandomizeBlocks() { $grid ...

Ways to remove code from production during build process?

Is there a way to omit typescript code from getting bundled by webpack during build process? Let's say I have the following line of code in my app.ts file (a nodejs application): const thisShouldNotBeInProductionBundleJustInDevBundle = 'aaaaaaa ...

Numerous requests for .js files originating from a local server

I am currently working on an HTML project where I need to link multiple .js files from my local computer. Below is the structure of my folders: Documents/ ├── js/ | └── .js files └── index.html Within my HTML file, I have included the ...

Iterating over an array and setting the key for a new array

I have encountered a challenge while attempting to create a new array where the key is the index of the original array. var array = [ {"tom": "red", "part":"green", "brow_id":45}, {"tom": "red", "part":"yellow", "brow_id":1}, ...

Access denied: CORS issue causing Satellizer login error

I've been trying to set up the satellizer's local signup and signin feature. The signup process is working, but I noticed that it first sends an OPTIONS request before sending a POST request. The issue arises when I attempt to log in, as I recei ...

Utilize flexbox to create a list that is displayed in a column-reverse layout

I am facing a challenge in displaying the latest chat person in the 1st position (active) using Firebase. Unfortunately, Firebase does not have a date field which makes it difficult to achieve this. I have attempted converting the date into milliseconds an ...

What are the steps for generating and implementing shared feature files in Cucumber?

I am currently utilizing Cucumber to define some tests for the project I am working on, but as the application grows larger, I find myself in need of a more efficient structure. project | feature_files | | app1.js | | app2.js | | app3.js ...

Customizing the JavaScript Calendar in Qualtrics

I came across a JavaScript code snippet that allows you to embed a calendar into a Qualtrics question. Specify a date for the survey: <link href="https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css" rel="stylesheet" type="text/css" /> <script sr ...

Angular 6: Dealing with Type Errors in the HttpClient Request

I am encountering issues with my services. I am attempting to retrieve a list of media files (generated by NodeJS, which generates a JSON file containing all media items). Although I can successfully fetch the data, I am facing an error stating "Property & ...

Encountering issues with Angular 2 router navigation within OnInit of a component

In the process of creating a testing platform for students to take tests, I encounter an issue with navigation in my TestComponent. Upon initialization, I retrieve the complete test from a service and then attempt to route to either the questions or instru ...

Is there a way to remove a link to an image that pulls data from another website?

On my HTML page, I have implemented the following code to display weather data: <!-- Begin Weather Data Code --> <div style="display:none;"> <a href="http://iushop.ir"> <h1>Weather</h1> </a> </div> < ...