1. unminified-webpack-plugin
A `webpack` plugin for generating un-minified JavaScript files along with minimize.
unminified-webpack-plugin
Package: unminified-webpack-plugin
Created by: leftstick
Last modified: Tue, 28 Jun 2022 05:10:20 GMT
Version: 3.0.0
License: MIT
Downloads: 16,293
Repository: https://github.com/leftstick/unminified-webpack-plugin

Install

npm install unminified-webpack-plugin
yarn add unminified-webpack-plugin

unminified-webpack-plugin

NPM version



webpack@4 and webpack@5 is now supported.

A webpack plugin for generating un-minified JavaScript files along with minimize.

This plugin should only be used while you are developing standalone library

Why unminified-webpack-plugin

Maybe you are encountering the same issue as mine, once you are developing a standalone library via webpack, it's not possible to generate the uncompressed file along with the minified version at one time. Here is the question i found at stackoverflow, it seems many people are suffering for this.

As a workaround, you may do something like webpack && webpack --config webpack.config.prod.js, but the solution is really ugly and inelegant.

That's why i am here! ^^

Installation

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

Usage

 const path = require('path');
const webpack = require('webpack');
const UnminifiedWebpackPlugin = require('unminified-webpack-plugin');

module.exports = {
    mode: 'production',
    entry: {
        index: './src/index.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'library.min.js'
    },
    plugins: [
        new UnminifiedWebpackPlugin()
    ]
};

By doing as above, you will get two files library.min.js and library.js. No need execute webpack twice, it just works!^^

filename includes min, such as: ad-min.js, ad-min-1.0.js, will be treated as minified name as well. See cope with 'min' in names like 'Admin'

Configuration

postfix: you can specify the nomin part as you wish. nomin is the default postfix once you haven't specify min in output.filename. And it can be customized by specifying this option, following is example:

 const path = require('path');
const webpack = require('webpack');
const UnminifiedWebpackPlugin = require('unminified-webpack-plugin');

module.exports = {
    entry: {
        index: './src/index.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'library.js'//no "min" specified
    },
    plugins: [
        new UnminifiedWebpackPlugin({
            postfix: 'unmin',//specify "nomin" postfix
            include: /polyfill.*/,
            exclude: /test.*/
        })
    ]
};

By doing as above, you will get two files library.js and library.unmin.js

include, exclude just work the same way as UglifyJsPlugin

Check working-example for css assets support

LICENSE

MIT License

RELATED POST

10 Must-Know Windows Shortcuts That Will Save You Time

10 Must-Know Windows Shortcuts That Will Save You Time

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Navigating AWS Networking: Essential Hacks for Smooth Operation

Navigating AWS Networking: Essential Hacks for Smooth Operation

Achieving Stunning Visuals with Unity's Global Illumination

Achieving Stunning Visuals with Unity's Global Illumination

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code