How to build both minified and uncompressed bundle with Webpack

Build both .js and .min.js with webpack.md

Q: How to build both minified and uncompressed bundle with Webpack?

A1: Use plugin UglifyJsPlugin (before webpack 4)

let webpack = require("webpack");

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

Source: https://stackoverflow.com/a/34018909

A2: Use plugin UglifyJsPlugin (since webpack 4)

Install module uglifyjs-webpack-plugin:

$ npm install --save-dev uglifyjs-webpack-plugin

Then add the plugin to your webpack config:

let UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
    optimization: {
        minimizer: [new UglifyJsPlugin()]
    }
};

Source: https://webpack.js.org/plugins/uglifyjs-webpack-plugin/

A3: Use plugin UnminifiedWebpackPlugin (probably since webpack 4)

Install module unminified-webpack-plugin:

$ npm install --save-dev unminified-webpack-plugin

Then add the plugin to your webpack config:

let UnminifiedWebpackPlugin = require('unminified-webpack-plugin');

module.exports = {
    entry: {
        'bundle': './entry.js'
    },
    output: {
        path: './dist',
        filename: '[name].min.js'
    },
    plugins: [
        new UnminifiedWebpackPlugin()
    ]
};

By doing as above, you will get two files bundle.min.js and bundle.js.

Sources:

• https://www.npmjs.com/package/unminified-webpack-plugin
• https://stackoverflow.com/a/37191699

A4: Make two builds simultaneously (any webpack version)

Use environment variable in your webpack config:

module.exports = {
    entry: {
        'bundle': './entry.js'
    },
    output: {
        path: './dist',
        filename: process.env.NODE_ENV === 'production' ? '[name].min.js' : '[name].js'
    }
};

Then make both builds:

$ webpack && cross-env NODE_ENV=production webpack -p

Thanks for this 👍🏻

Another cool way to do this is to give webpack an array of webpack configuration objects, as indicated here https://stackoverflow.com/a/55978987.