Build Tool Minification

Minification in build tools.

Webpack Minification

Production mode (auto-minifies)
mode: production

Custom Terser config
const TerserPlugin = require(terser-webpack-plugin);

optimization: {
  minimize: true,
  minimizer: [
    new TerserPlugin({
      terserOptions: {
        compress: {
          drop_console: true
        }
      }
    })
  ]
}

Vite Minification

Build config (vite.config.js)
build: {
  minify: terser, // or esbuild (default)
  terserOptions: {
    compress: {
      drop_console: true,
      drop_debugger: true
    }
  }
}

esbuild (faster, default)
minify: esbuild

Gulp Minification

gulpfile.js
const gulp = require(gulp);
const uglify = require(gulp-uglify);
const cleanCSS = require(gulp-clean-css);

gulp.task(minify-js, () =>
  gulp.src(src/*.js)
    .pipe(uglify())
    .pipe(gulp.dest(dist))
);

Source Maps

Generate source maps for debugging
// Webpack
devtool: source-map

// Vite
build: {
  sourcemap: true
}

Terser with source maps
terser input.js --source-map -o output.min.js