- Webpack is a new module bundler.The existing module bundlers like Grunt are not good for big projects.
- Webpack brings code splitting,plug-in,loaders which makes Webpack more efficiently and seamless integrates with any size of project.
- In this demo,”We will learn to install Webpack and configure the webpack development server”.
- Webpack development server connect with the rendered application using a socket.For any change in bundle it injects the compiled bundled to the rendered application.It helps in reducing recompilation task.
- For this demo we have setup a directory and a package.json using npm init command.The following screenshot shows the WebPackDemo directory and the package.json initialization.
- The Webpack can be installed using npm install WebPack –save-dev command.The following screenshot shows the installation of webpack in terminal.
- The WebPack development server can be installed using npm install webpack-dev-server –dev-save command in terminal.The following screenshot shows the terminal with Webpack development server installation.
- Now We can add the webpack development server in the package.json file to start the development server.The content of package.json file is as follows.
{
"name": "WebPackDemo",
"version": "0.0.1",
"description": "Webpack setup",
"scripts": {
"dev": "webpack-dev-server --port 8080"
},
"repository": {
"type": "git"
},
"author": "sandeep",
"license": "ISC",
"devDependencies": {
"node-libs-browser": "^0.5.0",
"webpack": "^1.9.4"
}
}
- The webpack development server can now be called using npm run dev command in terminal.The following screenshot shows the webpack development server start.
- We have created a index.html file which has some dummy message.We will serve this index.html file through Webpack development server.The updated directory structure looks like following screenshot.
- The content of index.html file is as follows.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>WebPack Development Server Demo</title>
</head>
<body>
<h1>WebPack Development Server Demo</h1>
<script src="htpp://localhost:8080/webpack-dev-server.js"></script>
</body>
</html>
- Webpack development server is running using port 8080.The following screenshot shows webpack server.
