title: Webpack how to build production code and how to use it
body: <p>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 <code>npm run build</code> and its started building and it generated some files in <code>./dist/</code> directory.</p>
  
  <ol>
  <li>Still these files are heavy(same as development version)</li>
  <li>How to use these files? Currently I am using webpack-dev-server to
  run the application.</li>
  </ol>
  
  <p>package.json file</p>
  
  <pre><code>{
    "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" : "", ...
    }
  }
  </code></pre>
  
  <p>webpack.config.js</p>
  
  <pre><code>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]
    }
  };
  </code></pre>
  
  <p>webpack.production.config.js</p>
  
  <pre><code>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]
    }
  };
  </code></pre>