How to build minified and uncompressed bundle with webpack

Question

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

User · Answer

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

User · Answer

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

User · Answer

webpack entry jsx   output js -p   works for me  with -p flag

User · Answer

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

User · Answer

You should export an array like this   const path   require  path    const webpack   require  webpack     const libName    YourLibraryName    function getConfig env      const config         mode  env      output          path  path resolve  dist          library  libName        libraryTarget   umd         filename  env      production       libName  min js       libName  js             target   web            your shared options             return config     module exports       getConfig  development      getConfig  production

User · Answer

I had the same issue  and had to satisfy all these requirements    Minified   Non minified version  as in the question  ES6 Cross platform  Windows   Linux     I finally solved it as follows   webpack config js   const path   require  path    const MinifyPlugin   require  babel-minify-webpack-plugin     module exports   getConfiguration   function getConfiguration env        var outFile      var plugins           if  env      prod             outFile    mylib dev           plugins push new MinifyPlugin           else           if  env      dev                 console log  Unknown env     env      Defaults to dev                      outFile    mylib dev debug              var entry           entry outFile       src mylib-entry js        return           entry  entry          plugins  plugins          output                filename    name  js               path    dirname                      package json          name    mylib js                scripts              build    npm-run-all webpack-prod webpack-dev            webpack-prod    npx webpack --env prod            webpack-dev    npx webpack --env dev              devDependencies                          babel-minify-webpack-plugin     0 2 0            npm-run-all     4 1 2            webpack     3 10 0            Then I can build by  Don t forget to npm install before    npm run-script build

User · Answer

You can format your webpack config js like this   var debug   process env NODE ENV      production   var webpack   require  webpack     module exports         context    dirname      devtool  debug    inline-sourcemap    null      entry     entry js       output            path    dirname     dist           filename   library min js             plugins  debug                  new webpack optimize DedupePlugin            new webpack optimize OccurenceOrderPlugin            new webpack optimize UglifyJsPlugin   mangle  false  sourcemap  false                  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

User · Answer

You can define two entry points in your webpack configuration  one for your normal js and the other one for minified js  Then you should output your bundle with its name  and configure UglifyJS plugin to include min js files  See the example webpack configuration for more details   module exports      entry        bundle      src index js       bundle min      src index js         output       path  path resolve   dirname   dist       filename    name  js        plugins       new webpack optimize UglifyJsPlugin         include     min  js          minimize  true               After running webpack  you will get bundle js and bundle min js in your dist folder  no need for extra plugin

User · Answer

I found a new solution for this problem   This uses an array of configuration to enable webpack to build the minified and non-minified version in parallel  This make build faster  No need to run the webpack twice  No need extra plugins  Just webpack   webpack config js  const devConfig       mode   development     entry    bundle     src entry js       output    filename    name  js       module             resolve             plugins              const prodConfig          devConfig    mode   production     output    filename    name  min js        module exports    env    gt      switch  env        case  production         return  devConfig  prodConfig       default        return devConfig           Running webpack will only build the non-minified version   Running webpack --env production will build the minified and non-minified version at the same time

User · Answer

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  amp  amp  webpack --config webpack config min js

User · Answer

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

User · Answer

According with this line  https   github com pingyuanChen webpack-uglify-js-plugin blob master index js L117  should be something like   var webpack   require  webpack     module exports        entry     entry js     devtool   source-map     output        path     dist       filename   bundle js         plugins        new webpack optimize UglifyJsPlugin        minimize  true       compress  false                 Indeed you can have multiple builds by exporting different configs according your env   argv strategies

User · Answer

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

User · Answer

In my opinion it s a lot easier just to use the UglifyJS tool directly    npm install --save-dev uglify-js  Use webpack as normal  e g  building a   dst bundle js file  Add a build command to your package json    scripts          build    webpack  amp  amp  uglifyjs   dst bundle js -c -m -o   dst bundle min js --source-map   dst bundle min js map     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

[javascript] How to build minified and uncompressed bundle with webpack?

Examples related to javascript

Examples related to node.js

Examples related to webpack