How to build minified and uncompressed bundle with webpack?

Here's my webpack.config.js

var webpack = require("webpack");

module.exports = {

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

I'm building with

$ webpack

In my dist folder, I'm only getting

  • bundle.min.js
  • bundle.min.js.map

I'd also like to see the uncompressed bundle.js

webpack.config.js:

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
    })
  ]
};

Since Webpack 4, webpack.optimize.UglifyJsPlugin has been deprecated and its use results in error:

webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead

As the manual explains, the plugin can be replaced with minimize option. Custom configuration can be provided to the plugin by specifying UglifyJsPlugin instance:

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

module.exports = {
  // ...
  optimization: {
    minimize: true,
    minimizer: [new UglifyJsPlugin({
      include: /\.min\.js$/
    })]
  }
};

This does the job for a simple setup. A more effective solution is to use Gulp together with Webpack and do the same thing in one pass.

How to build both minified and uncompressed bundle with Webpack , Q: How to build both minified and uncompressed bundle with Webpack? A1: Use plugin UglifyJsPlugin (before webpack 4). let webpack = require� $ webpack To build it minified run: $ NODE_ENV=production webpack Notes: Make sure that for the unminified version you change the output file name to library.js and for the minified library.min.js so they do not overwrite each other.

You can use a single config file, and include the UglifyJS plugin conditionally using an environment 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 })
  ]
};

and then just set this variable when you want to minify it:

$ PROD_ENV=1 webpack

Edit:

As mentioned in the comments, NODE_ENV is generally used (by convention) to state whether a particular environment is a production or a development environment. To check it, you can also set const PROD = (process.env.NODE_ENV === 'production'), and continue normally.

How to build minified and uncompressed bundle � Issue #679 , * Allows you to configure the options passed to the terser-webpack-plugin. * A list of available options can be found at https://github.com/webpack� And then to build it unminified run (while in the project's main directory): $ webpack. To build it minified run: $ NODE_ENV=production webpack. Notes: Make sure that for the unminified version you change the output file name to library.js and for the minified library.min.js so they do not overwrite each other. answered Jan 28 at 19:51 cnzac 150 9

You can run webpack twice with different arguments:

$ webpack --minimize

then check command line arguments in webpack.config.js:

var path = require('path'),
  webpack = require('webpack'),
  minimize = process.argv.indexOf('--minimize') !== -1,
  plugins = [];

if (minimize) {
  plugins.push(new webpack.optimize.UglifyJsPlugin());
}

...

example webpack.config.js

Both minified and uncompressed bundle with Webpack : webpack, Both minified and uncompressed bundle with Webpack. I needed to build both app.js and app.min.js but surprisingly it was an either-or situation! Thankfully� Both minified and uncompressed bundle with Webpack I needed to build both app.js and app.min.js but surprisingly it was an either-or situation! Thankfully there exists a plugin just for this: unminified-webpack-plugin .

To add another answer, the flag -p (short for --optimize-minimize) will enable the UglifyJS with default arguments.

You won't get a minified and raw bundle out of a single run or generate differently named bundles so the -p flag may not meet your use case.

Conversely the -d option is short for --debug --devtool sourcemap --output-pathinfo

My webpack.config.js omits devtool, debug, pathinfo, and the minmize plugin in favor of these two flags.

How to build minified and uncompressed bundle with webpack , Here's my webpack.config.js var webpack = require("webpack"); module.exports = { entry: "./entry.js", devtool: "source-map", output: { path: "./dist", filename:� I was recently debugging a bundled webpack app and it quickly became clear that the only way forward was debugging the actual source, not the minified code. Duh.y . To prevent webpack from minifying the source, add the following to your webpack config: { // . other webpack, like output, etc. optimization: { minimize: false }, }

Maybe i am late here, but i have the same issue, so i wrote a unminified-webpack-plugin for this purpose.

Installation

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

Usage

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

module.exports = {
    entry: {
        index: './src/index.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'library.min.js'
    },
    plugins: [
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        }),
        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!^^

Webpack compression plugin, webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging � Use webpack as normal, e.g. building a./dst/bundle.js file. Add a build command to your package.json : Whenever you want to build a your bundle as well as uglified code and sourcemaps, run the npm run build command. No need to install uglify-js globally, just install it locally for the project.

Production, The goals of development and production builds differ greatly. In production, our goals shift to a focus on minified bundles, lighter weight source maps, and� Currently we're using Webpack for our Module loader, and Gulp for everything else (sass -> css, and the dev/production build process). I want to wrap the webpack stuff into gulp, so all I have to do is type gulp and it starts, watches and runs webpack and the rest of what our gulp is setup to do.

unminified-webpack-plugin, A `webpack` plugin for generating un-minified JavaScript files along with library via webpack , it's not possible to generate the uncompressed� If I build the webpage with Webpack with devtool: 'eval-source-map' I get the same result as with Webpack-dev-server. You can check if the build js files have an embedded sourceMap. share | improve this answer

Webpack from Nothing, There's literally no reason to send uncompressed JavaScript to a user other than laziness (or, in our case, the lack of So, we want to generate a file like 924giuwergoihq3rofdfg-bundle.js , where Minifying with the TerserWebpackPlugin. You don't need to be working on a fancy, large-scale project to use Webpack. James Hibbard demonstrates how you can use it to bundle a simple static site.

Comments
  • @FeloVilches I don't even mention that this is done in webpack.config.js, but this is presumed once we are in Node.js land and use Webpack.
  • Hmm, in webpack 4 i got: Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.
  • Update: now you can use terser-webpack-plugin webpack.js.org/plugins/terser-webpack-plugin
  • Node has one "default" variable for that, it's called NODE_ENV.
  • Isn't the option called compress instead of minimize?
  • Just a small gotcha: when you call webpack with arguments, like webpack -p the settings from webpack.optimize.UglifyJsPlugin in your webpack config will be (at least partially) ignored (at least setting mangle: false is ignored).
  • Notice that this generates only one file at a time. So in order to make this work for the question there should be multiple Webpack passes, webpack && webpack -p.
  • For anyone reading this, I would suggest using definePlugin instead, which I think is installed by default with Webpack.
  • Seems very simple solution to me; just that as of webpack v3.5.5 it has built-in switch called --optimize-minimize or -p.
  • The idea is cool, but not work now, webpack will yell "Unknown argument: minimize" Solution: use --env.minimize more details in the following link github.com/webpack/webpack/issues/2254
  • Can use more standard way to pass environment indication in webpack: stackoverflow.com/questions/44113359/…
  • Thanks @everett1992 , this solution works great. The vast majority of the time I run the dev build, then when I'm done I use the -p flag to spit out a minified production build. No need to create two separate Webpack configs!