uglify-loader

3.0.0 verified Sat Apr 25 auth: no javascript

A webpack loader that applies UglifyJS minification (with mangling) to individual modules during bundling, as opposed to the webpack UglifyJSPlugin which minifies the entire output after bundling. Version 3.0.0 is the latest stable release, targeting webpack 4+. The loader allows selective minification of application code while preserving third-party libraries, and supports custom UglifyJS options via loader options. It is maintained by the community and sees infrequent updates.

Common errors

error Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type. ↓

cause uglify-loader expects valid JavaScript input; it cannot handle non-JS files like CSS or TypeScript.

fix

Ensure the test pattern only matches .js files and exclude other file types.

error Configuration file had an error: Error: webpack.optimize.UglifyJsPlugin is not a plugin ↓

cause Confusing uglify-loader with webpack's built-in UglifyJsPlugin.

fix

Use the string 'uglify-loader' in the rules configuration, not the plugin.

Warnings

breaking uglify-loader 3.x only supports webpack 4+. Using with webpack 5 may cause issues; consider terser-webpack-plugin instead. ↓

fix Use terser-webpack-plugin for webpack 4+ or upgrade to webpack 5 compatible minifier.

deprecated Loader options via webpack config property 'uglify-loader' is deprecated in webpack 2+. Use loader options instead. ↓

fix Move UglifyJS options into the loader's options object in webpack config.

gotcha The loader minifies each module individually, which may break global variable references if not careful. ↓

fix Ensure UglifyJS options handle global definitions properly or use a bundle-level minifier.

Install

npm install uglify-loader

yarn add uglify-loader

pnpm add uglify-loader

Imports

default

wrong

const uglifyLoader = require('uglify-loader'); // Not used directly; use string reference

correct

import uglifyLoader from 'uglify-loader'; // in webpack config as string 'uglify-loader'

Loader is referenced by name in webpack config, not imported directly.

Quickstart

Webpack configuration using uglify-loader on .js files excluding node_modules, with custom UglifyJS options.

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'uglify-loader',
          options: {
            mangle: true,
            compress: { sequences: true, dead_code: true, conditionals: true }
          }
        }
      }
    ]
  }
};