How to build minified and uncompressed bundle with webpack?

Question

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

javascript
node.js
webpack

Answer 1

You can create two configs for webpack, one that minifies the code and one that doesn't (just remove the optimize.UglifyJSPlugin line) and then run both configurations at the same time $ webpack && webpack --config webpack.config.min.js

Answer 2

You can use a single config file, and include the UglifyJS plugin conditionally using an environment variable:

var webpack = require("webpack");

var PROD = JSON.parse(process.env.PROD_DEV || "0");

module.exports = {

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

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

$ PROD_DEV=1 webpack