Webpack how to build production code and how to use it

Question

I am very new to webpack  I found that in production build we can able to reduce the size of overall code  Currently webpack builds around 8MB files and main js around 5MB  How to reduce the size of code in production build  I found a sample webpack configurtion file from internet and I configured for my application and I run npm run build and its started building and it generated some files in   dist  directory    Still these files are heavy same as development version  How to use these files  Currently I am using webpack-dev-server to run the application    package json file       name    MyAPP      version    0 1 0      description          main    src server server js      repository          type    git        url              keywords             author    Iam      license    MIT      homepage    http   example com      scripts          test            start    babel-node src server bin server        build    rimraf dist  amp  amp  NODE ENV production webpack --config   webpack production config js --progress --profile --colors          dependencies          scripts                    devDependencies          scripts                    webpack config js  var path   require  path    var webpack   require  webpack    var HtmlWebpackPlugin   require  html-webpack-plugin    var public dir    src frontend   var ModernizrWebpackPlugin   require  modernizr-webpack-plugin     module exports       devtool   eval-source-map     entry         webpack-hot-middleware client reload true       path join   dirname  public dir    main js          output        path  path join   dirname    dist         filename    name  js       publicPath             plugins        plugins        module        loaders   loaders           webpack production config js  var path   require  path    var webpack   require  webpack    var HtmlWebpackPlugin   require  html-webpack-plugin    var public dir    src frontend   var ModernizrWebpackPlugin   require  modernizr-webpack-plugin    console log path join   dirname   src frontend     index html      module exports       devtool   eval-source-map     entry         webpack-hot-middleware client reload true       path join   dirname   src frontend     main js          output        path  path join   dirname    dist         filename    name  js       publicPath             plugins   plugins     resolve        root   path resolve    src frontend utils    path resolve    src frontend         extensions         js     css           module        loaders   loaders

User · Answer

Use these plugins to optimize your production build:

  new webpack.optimize.CommonsChunkPlugin('common'),
  new webpack.optimize.DedupePlugin(),
  new webpack.optimize.UglifyJsPlugin(),
  new webpack.optimize.AggressiveMergingPlugin()

I recently came to know about compression-webpack-plugin which gzips your output bundle to reduce its size. Add this as well in the above listed plugins list to further optimize your production code.

new CompressionPlugin({
      asset: "[path].gz[query]",
      algorithm: "gzip",
      test: /\.js$|\.css$|\.html$/,
      threshold: 10240,
      minRatio: 0.8
})

Server side dynamic gzip compression is not recommended for serving static client-side files because of heavy CPU usage.

User · Answer

Just learning this myself  I will answer the second question     How to use these files  Currently I am using webpack-dev-server to run the application    Instead of using webpack-dev-server  you can just run an  express   use npm install  express  and create a server js in the project s root dir  something like this   var path   require  path    var express   require  express     var DIST DIR   path join   dirname   build    var PORT   3000  var app   express       Serving the files on the dist folder app use express static DIST DIR       Send index html when the user access the web app get      function  req  res      res sendFile path join DIST DIR   index html          app listen PORT     Then  in the package json  add a script    start    node server js    Finally  run the app  npm run start to start the server  A detailed example can be seen at  https   alejandronapoles com 2016 03 12 the-simplest-webpack-and-express-setup   the example code is not compatible with the latest packages  but it will work with small tweaks

User · Answer

You can add the plugins as suggested by  Vikramaditya  Then to generate the production build  You have to run the the command NODE ENV production webpack --config   webpack production config js  If using babel  you will also need to prefix BABEL ENV node to the above command

User · Answer

You can use argv npm module  install it by running npm install argv --save  for getting params in your webpack config js file and as for production  you use -p flag  build    webpack -p   you can add condition in webpack config js file like below  plugins        new webpack DefinePlugin            process env                 NODE ENV   argv p   JSON stringify  production     JSON stringify  development                        And thats it

User · Answer

This will help you   plugins        new webpack DefinePlugin          process env                This has effect on the react lib size          NODE ENV   JSON stringify  production                        new ExtractTextPlugin  bundle css    allChunks  false        new webpack optimize AggressiveMergingPlugin        new webpack optimize OccurrenceOrderPlugin        new webpack optimize DedupePlugin        new webpack optimize UglifyJsPlugin         mangle  true        compress            warnings  false     Suppress uglification warnings         pure getters  true          unsafe  true          unsafe comps  true          screw ie8  true                output            comments  false                 exclude      min  js  gi     skip pre-minified libs             new webpack IgnorePlugin       locale      moment        https   stackoverflow com questions 25384360 how-to-prevent-moment-js-from-loading-locales-with-webpack     new CompressionPlugin         asset    path  gz query          algorithm   gzip         test     js    css    html          threshold  10240        minRatio  0

User · Answer

If you have a lot of duplicate code in your webpack dev config and your webpack prod config  you could use a boolean isProd to activate certain features only in certain situations and only have a single webpack config js file   const isProd    process env NODE ENV      production      if  isProd         plugins push new AotPlugin          mainPath    main ts          hostReplacementPaths              environments index ts    environments index prod ts                  exclude              tsConfigPath    src tsconfig app json               plugins push new UglifyJsPlugin          mangle              screw ie8   true                 compress              screw ie8   true           warnings   false                 sourceMap   false                By the way  The DedupePlugin plugin was removed from Webpack  You should remove it from your configuration   UPDATE   In addition to my previous answer   If you want to hide your code for release  try enclosejs com  It allows you to    make a release version of your application without sources create a self-extracting archive or installer Make a closed source GUI application Put your assets inside the executable   You can install it with npm install -g enclose

User · Answer

After observing number of viewers to this question I decided to conclude an answer from Vikramaditya and Sandeep   To build the production code the first thing you have to create is production configuration with optimization packages like     new webpack optimize CommonsChunkPlugin  common js      new webpack optimize DedupePlugin      new webpack optimize UglifyJsPlugin      new webpack optimize AggressiveMergingPlugin     Then in the package json file you can configure the build procedure with this production configuration   scripts          build    NODE ENV production webpack --config   webpack production config js       now you have to run the following command to initiate the build  npm run build   As per my production build configuration webpack will build the source to   dist directory   Now your UI code will be available in   dist  directory  Configure your server to serve these files as static assets  Done

User · Answer

In addition to Gilson PJ answer    new webpack optimize CommonsChunkPlugin  common js     new webpack optimize DedupePlugin     new webpack optimize UglifyJsPlugin     new webpack optimize AggressiveMergingPlugin     with    scripts          build    NODE ENV production webpack -p --config   webpack production config js       cause that the it tries to uglify your code twice  See https   webpack github io docs cli html production-shortcut-p for more information   You can fix this by removing the UglifyJsPlugin from plugins-array or add the OccurrenceOrderPlugin and remove the  -p -flag  so one possible solution would be   new webpack optimize CommonsChunkPlugin  common js     new webpack optimize DedupePlugin     new webpack optimize UglifyJsPlugin     new webpack optimize OccurrenceOrderPlugin     new webpack optimize AggressiveMergingPlugin     and    scripts          build    NODE ENV production webpack --config   webpack production config js

[node.js] Webpack how to build production code and how to use it

Examples related to node.js

Examples related to reactjs

Examples related to npm

Examples related to webpack

Examples related to webpack-dev-server