Working With WebPack Development Server -Tutorial Savvy

In my previous post we have learnt installation and configuration of WebPack development server inside package.json file.
Without WebPack development server We have to call WebPack command frequently to generate a build(bundle.js) for each change in the development code.
WebPack development server is equipped with hot deployment and produce the build(bundle.js) on the fly for each change in development code.
For this demo we have created the following directory and file structure. The dev directory contains JavaScript file like script1.js,script2.js and app.js.The out directory contains a index.html file.

The dev/script1.js file contains function createH1Element() for creating H1 element and append as a child to body element.The createH1Element() method is exported using ES6 module export mechanism.The content of dev/script1.js file is as follows.

module.exports.createH1Element = function(message){
    var h1 = document.createElement("h1");
    h1.innerText= message;
    document.body.appendChild(h1);
}

The dev/script2.js file contains function createH2Element() for creating H2 element and append as a child to body element.The createH2Element() method is exported using ES6 module export mechanism.The content of dev/script2.js file is as follows.

module.exports.createH2Element = function(message){
    var h2 = document.createElement("h2");
    h2.innerText= message;
    document.body.appendChild(h2);
}

The dev/app.js imports the script1.js and script2.js file and uses the function to append some string messages.The content of dev/app.js file are as follows.

var script1= require('./script1.js');
var script2= require('./script2.js');

script1.createH1Element("I am from Script1");
script2.createH2Element("I am from Script2");

The webpack.config.js file contains the webpack configuration code which takes the app.js as entry point and bundles the code in bundle.js file created on the fly.The following code shows the content of webpack.config.js file.

var path = require("path");

module.exports = {
    entry: [
        "webpack/hot/dev-server",
        path.resolve(__dirname, "dev/app.js")
    ],
    output: {
        path : path.resolve(__dirname,'out'),
        filename: "bundle.js"
    }
};

The package.json file contains the code for running webpack development server.The following code shows the content of package.json file.

{
  "name": "WebPackDemo",
  "version": "0.0.1",
  "description": "Webpack setup",
  "scripts": {
    "dev": "webpack-dev-server --hot --config webpack.config.js --content-base out/ --devtool eval --port 8080"
  },
  "repository": {
    "type": "git"
  },
  "author": "sandeep",
  "license": "ISC",
  "devDependencies": {
    "node-libs-browser": "^0.5.0",
    "webpack": "^1.9.4"
  }
}

Now WebPack development server can be called using npm run dev command in terminal.The following screenshot shows the terminal with webpack development server started and listening to changes in the code.

The out/index.html file contains the HTML markup code.The content of out/index.html file is as follows.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>WebPack Development Server Demo</title>
</head>
<body>
    <script src="http://localhost:8080/webpack-dev-server.js"></script>
    <script src="bundle.js"></script>
</body>
</html>

The output of the demo can be viewed on localhost with port 8080.The following screenshot shows the output of the application in chrome.

The following screenshot shows the chrome console with HTML inspection.

Lets change the message and appended Hello before the message.The Webpack development server detected the changes and creates a new bundle.js and hot updates to the browser using socket.The following screenshot shows the terminal with webpack development server console messages detecting change in the message.