Saturday, January 28, 2017

How to build minified and uncompressed bundle with webpack?

By Hường Hana 11:30 AM , , Leave a Comment

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

8 Answers

Answers 1

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_ENV || '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({       compress: { warnings: false }     })   ] : [] };

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 var PROD = (process.env.NODE_ENV === 'production'), and continue normally.

Answers 2

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

Answers 3

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

While not being as effective as doing the same thing in one pass in Gulp, it does the job for a simple setup.

Answers 4

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.

Answers 5

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!^^

Answers 6

In my opinion it's a lot easier just to use the UglifyJS tool directly:

  1. npm install --save-dev uglify-js
  2. Use webpack as normal, e.g. building a ./dst/bundle.js file.

  3. Add a build command to your package.json:

    "scripts": {     "build": "webpack && uglifyjs ./dst/bundle.js -c -m -o ./dst/bundle.min.js --source-map ./dst/bundle.min.js.map" }
  4. 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.

Answers 7

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

Answers 8

webpack entry.jsx ./output.js -p

works for me, with -p flag.

If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment