Complete Guide to Building Minified and Uncompressed Bundles with Webpack

Introduction

In modern front-end development, Webpack serves as a primary module bundler, with its flexible configuration allowing developers to generate different output versions based on requirements. A common scenario involves producing both minified versions for production and uncompressed versions for development and debugging. This article systematically addresses this goal through Webpack configuration, drawing from real-world Q&A data.

Problem Background and Initial Configuration Analysis

The original setup only produced a single minified file, bundle.min.js, along with its source map. The user desired an additional uncompressed bundle.js for debugging during development. The initial configuration used the deprecated webpack.optimize.UglifyJsPlugin, which causes errors in newer Webpack versions.

Multi-Entry Point Solution

The top-rated answer achieves dual output by defining multiple entry points. The configuration is as follows:

const webpack = require("webpack");

module.exports = {
  entry: {
    "bundle": "./entry.js",
    "bundle.min": "./entry.js",
  },
  devtool: "source-map",
  output: {
    path: "./dist",
    filename: "[name].js"
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      include: /\.min\.js$/,
      minimize: true
    })
  ]
};

This setup creates two entry points, bundle and bundle.min, both pointing to the same entry.js file. The output filenames use the [name] placeholder, generating bundle.js and bundle.min.js respectively. The UglifyJsPlugin is configured with an include option to minify only .min.js files, ensuring the uncompressed version remains intact.

Modern Configuration for Webpack 4+

Starting from Webpack 4, webpack.optimize.UglifyJsPlugin has been removed, and the optimization.minimize option is recommended. An updated configuration example is:

const webpack = require("webpack");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  entry: {
    "bundle": "./entry.js",
    "bundle.min": "./entry.js",
  },
  devtool: "source-map",
  output: {
    path: "./dist",
    filename: "[name].js"
  },
  optimization: {
    minimize: true,
    minimizer: [new UglifyJsPlugin({
      include: /\.min\.js$/
    })]
  }
};

This configuration uses the optimization.minimizer array to specify custom minification plugins. UglifyJsPlugin must be installed separately and is restricted by the include regex to minify only bundle.min.js.

Environment Variable Controlled Builds

Another common approach involves using environment variables to dynamically control build behavior. An example configuration uses the PROD_ENV variable:

const webpack = require('webpack');
const TerserPlugin = require('terser-webpack-plugin');

const PROD = JSON.parse(process.env.PROD_ENV || '0');

module.exports = {
  entry: './entry.js',
  devtool: 'source-map',
  output: {
    path: './dist',
    filename: PROD ? 'bundle.min.js' : 'bundle.js'
  },
  optimization: {
    minimize: PROD,
    minimizer: [
      new TerserPlugin({ parallel: true })
    ]
  }
};

Running PROD_ENV=1 webpack generates the minified version, while the default command produces the uncompressed one. This method simplifies configuration but requires multiple runs to obtain both versions.

Comparison of Alternative Approaches

The Q&A data mentions various alternatives, including command-line argument controls, dedicated plugins like unminified-webpack-plugin, and external toolchains such as UglifyJS. The multi-entry point solution generates all files in a single build, offering high efficiency; environment variable-based methods suit continuous integration scenarios; external tools provide greater flexibility but add complexity.

Connection to Reference Article

The reference article discusses using Gulp and Babel for ES6 module handling, emphasizing the integration of build toolchains. Similarly, Webpack configurations can employ babel-loader to process modern JavaScript, ensuring code is properly transpiled before minification. This modular processing forms the foundation for reliable bundle generation.

Best Practices Summary

For Webpack 4+ projects, using multiple entry points with optimization.minimizer is recommended for dual output. Key steps include defining multiple entries, utilizing the [name] placeholder for output, and restricting minification scope via the include option. This approach maintains configuration clarity and build efficiency.

Conclusion

By appropriately configuring Webpack, developers can effortlessly generate both minified and uncompressed JavaScript bundles to meet diverse environmental needs. Modern configuration practices enhance compatibility and optimize build performance through conditional minification. Combined with modular processing and source map support, this provides a comprehensive solution for front-end development.