Webpack fails to compress CSS and JS files into a single line while preserving comments

When I run the command npm run build, it successfully minifies my js and css files. However, the code is still spread over multiple lines and includes comments. How can I instruct webpack to compress it into a single line and remove comments?

This is what the build command looks like in my package.json:

"build": "npm run buildsprite && webpack --config ./webpack/webpack.config.prod.js --colors"

Below is the optimization chunk from webpack.config.prod.js:

optimization: {
  minimizer: [
    new TerserPlugin({
      test: /\.js(\?.*)?$/i,
      cache: true,
      parallel: true,
      sourceMap: true,
      extractComments: false,
    }),
  ],
},

Answer №1

According to the details provided in the Official Documentation, it is recommended that your configuration file, specifically webpack.config.prod.js, should resemble the following structure:

optimization: {
  minimize: true,
  minimizer: [
    new TerserPlugin({
      test: /\.js(\?.*)?$/i,
      cache: true,
      parallel: true,
      sourceMap: true,
      extractComments: false,
    }),
  ],
},

It is essential to include minimize: true in order for webpack to effectively apply minification using Terser plugin.

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

The navigation bar is not floating to the right of the <header> element

Having trouble with my header element and nav not floating to the right using "float: right;" Just dipping my toes into html&CSS, seeking assistance to make my nav bar float to the right. I've watched a few videos and checked out Stack Overflow, ...

What is the best way to implement the Vue router in a separate file?

The vue-router is currently working well, but we are interested in pushing a route from another file. Here is an example of the code: // src/router/index.ts import { route } from 'quasar/wrappers' import VueRouter from 'vue-router' impo ...

The input given to Material UI autocomplete is incorrect, even though the getOptionSelect parameter already exists

I'm currently working on creating my own version of the Google Places autocomplete found in the Material UI documentation. While I have successfully implemented the autocomplete feature and am able to update my component's state with the result, ...

Click on the text next to my checkbox to activate it

I've been attempting to create a situation where the text next to my checkbox is clickable. However, for some reason, the code I'm using doesn't seem to be working as expected. Can anyone help me troubleshoot this issue? <form name="f1"& ...

Tips for transferring and incorporating custom helper functions in JS/React

Task at Hand: Instead of constantly typing console, I want to import some shorthand. For example-- log('hi') should be the same as console.log('hi') Attempted Solution: This is what I have so far. I want to use shortcuts like l ...

Simultaneous beforeSave actions permitting repetitions

To prevent certain objects from being created, I incorporated a conditional in the beforeSave cloud function of that object type. However, when two objects are created at the same time, the conditional fails to work as expected. Check out my code snippet ...

"Encountering problem with sending data to server through Ajax

I am facing a very complex issue that requires an in-depth understanding. If this interests you, please continue reading. I have developed a program from scratch that generates an HTML page for user data input and submission. The submitted data is sent to ...

Trouble with Model Positioning in THREE.js

Currently experimenting with the code below: var loader = new THREE.JSONLoader(); var onGeometry = function(geom) { var tooth = new THREE.Mesh( geom, new THREE.MeshFaceMaterial()); tooth.position.set(xpos,ypos,0); teeth.push(tooth); scene.add(tooth); xpos ...

Why isn't the sticky element moving up along with its sibling element when scrolling?

This is an additional query related to my previous question How can I make an element sticky but scrollable to its full (variable) height with a sibling element? The issue at hand is that the right sidebar does scroll to its full available content and th ...

The symbol for expanding and collapsing sections in the Bootstrap accordion is not dynamically updating

I'm facing an issue with my bootstrap accordions. I have two accordions and each one has an inner accordion. The first one is set to be opened by default. However, when I click on the second accordion, the icon of the first one does not update to a pl ...

The issue with importing fonts in CSS causing an error is encountered when utilizing an exported Angular library

I have a components library for Angular that relies on line-awesome icons. To include the necessary fonts and styles, I am using a CDN in the main SCSS file as shown below: @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400; ...

CSS: Set the left position to 250px with the added feature of hiding any overflow

I am currently working on a sidebar that can be shown or hidden using JavaScript with CSS animations. To achieve this effect, I need to position the content div (#main) using left: 250px;. #main { left: 250px; position: relative; overflow: hidden; } ...

Executing PHP scripts using Ajax

Check out the code snippet below: <?php //echo $this->Html->css(array('bootstrap', 'mark', 'style')); echo $this->Html->script(array('timer','swfobject','bootstrap.min.js')); // ...

Tips for Transitioning a Div Smoothly Upwards with CSS!

This is the code that relates to the title: #main { float: left; width: 20%; height: 10vh; margin-top: 10vh; margin-left: 40%; text-align: center; } #k { font-family: Questrial; font-size: 70px; margin-top: -7px; ...

Adding a click function to a div individually when they share the same class in HTML

My goal is to include 4 unique divs inside a timeline container: This is how I envision the structure: <div id="timeline" > <div class="timeline-bar t-1"></div> <div class="timeline-bar t-2"> ...

What is the best way to fix the Syntax error that reads "Unexpected token (1:13)"?

I can't seem to figure out why my code keeps showing errors in the browser. I'm still new to coding and learning slowly, with help from knowledgeable individuals on stackoverflow :) Card 1.jsx Syntax error:() Unexpected token (1:13) > 1 | i ...

Finding the absolute root path of a npm package in Node.js

Objective I am on a quest to find a reliable method to ascertain the absolute root path of an npm package that has been installed in Node.js. Challenge Although I am aware of require.resolve, it only provides the entry point (path to the main module) an ...

The most recent release of react-dev-utils may come with an outdated version of browserslist, posing

<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e69483878592cb828390cb93928f8a6c0eaefcfe0eaf9">[email protected]</a> is using an outdated version of browserlist, <a href="/cdn-cgi/l/email-protection" class="__cf ...

The display of the key property is missing on the rendered page in a React TypeScript project

While working with Typescript React, I encountered an error message: react-jsx-dev-runtime.development.js:87 Warning: Each child in a list should have a unique "key" prop. Even though I included a key in the li tag like this: const MyMenuItem: ...

Scanning a barcode on the Google search page activates a specific event

I am looking to replicate the functionality seen on Google's search page where any user input, whether through keyboard or barcode scanner, automatically populates the search box. The input should be captured no matter where on the page it happens, wi ...