About Webpack

Webpack is a bundler of components. It helps to bundles images, javascript, css into desired set of output

Apart from this Web pack helps to send parameters to javascript transformation to convert packages for production or development mode of components.

Javascript Bundling

In a development environment, there will be lots of javascript file for each component or module. When we move those into production as is, it will have a performance impact. Browser can only make less than eight parallel connection or concurrent calls to a proxy/host. If we have more number of files that will result in delay in loading a page (after 8th request it waits for a request to be completed before it starts 9th requests).

Style Bunding

sass-loader, less-loader, style-loader are used to transform sass/less/css files to css.

Sample: 

  { test: /\.scss$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader") },

  { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }

Extract Text Plugin is used here to keep the CSS output in a separate file. We can define those in plugins

 plugins: [

    new ExtractTextPlugin("css/sample.min.css"),

    new webpack.optimize.UglifyJsPlugin({

       output:{

        beautify: false

      }},

    ),

    new webpack.NoErrorsPlugin()

  ],

React Transformation

Babel is used transform jsx to js. 

{ test: /(\.js|\.jsx)$/, include: path.join(__dirname, 'client'), loader: 'babel', query: { presets: ["es2015", "react", 'stage-1'] } },

  

Presets here is the list of plugins babel supports for transformation currently babel has stage-3.

Recommendations

• Reduce the number of static files as much as possible on production environment. This can be easily achieved using WebPack
• Have static files on a separate web application than the actual application and set expiration of static files desired duration so that it 
• Increase the parallel connection for application
• Take static files from cache
• Minfication of javascript helps to reduce the size of the javascript file. This can be done by Webpack.UglifyJSPlugin.
• Compress
• Mangle (Transform all local variables into character variables dynamically)
• Beautify (To reduce the white space)
• Comments (To remove/preserve comments) 
• These are the option available in WebPack Uglify JS Plugin
• Images, Sprite-WebPack helps to create a sprite image from sets of images.
• Use CDN for common javascript packages like Bootstrap, jQuery

Sample: https://github.com/hariram302/react-kickstart/blob/master/webpack.config.dev.js

NPM Package

NPM is package manager for JavaScript, NPM Manager helps us to find, store JavaScript packages. There are lots of open community building modules which helps to build application quickly. Any components build to be used by NPM requires a package.json, which helps us to define 

• Name - Name of the package
• Version
• Dependencies - Packages which are required to consumed by the application
• devDependecies - Packages required for development
• OptionalDependecies - Packages required for development, these are marked as optional when we execute npm install. If the package is not available npm install will fail.
• Scripts - To execute the command on package lifecycle

Sample Package.json for React Application

{

  "version": "1.0.0",

  "name": "testapp",

  "author": {

    "email": "hariram.p@gmail.com",

    "name": "Hariram P"

  } ,

  "private": true,

  "license": "MIT",

  "devDependencies": {

    "babel-loader": "6.2.4",

    "babel-core": "6.18.2",

    "babel": "6.5.2",

    "babel-preset-es2015": "6.9.0",

    "babel-preset-react": "6.11.1",

    "react": "15.2.1",

    "react-dom": "15.2.1",

    "webpack": "1.13.1"

  },

  "dependencies": {

   

  },

  "scripts": {

    "build": "webpack --config webpack.config.js --display-error-details"

  }

}