Let’s start Webpack

A small journey into front-end development with Webpack

This guide is for people that had problems to start and understand the Webpack Module Bundler.

Why Webpack?

Imagine that today’s each website can have hundred files like JSS, CSS, less, and so on. Webpack make easier to deal with all app assets as modules and intelligently split the dependency tree into chunks loaded on demand into your web application.

Webpack Goals

Keep initial loading time low

Every static asset should be able to be a module

Ability to integrate 3rd-party libraries as modules

Ability to customize nearly every part of the module bundler

Suited for big projects

Split the dependency tree into chunks loaded on demand

A big code base needs to be very well organized, and Webpack module systems offer the option to split your code base into modules.

Let’s get started!

Create a project folder named as you wish, for this tutorial, I will call it as hello-webpack

mkdir hello-webpack

cd hello-webpack

Inside the project folder, lets’s init our project. Creating these files.

├── build - Build folder used by webpack to generate files

│ └── index.html - Index html file

├── src - Project source folder

│ ├── components - Components folder

│ │ └── hello.js - Hello component

│ └── index.js - Index js file

└── webpack.config.js - Webpack config

Init our project with npm. At this point I suposed that you already have Node.js installed. (If don’t, you can install it like a boss)

npm init -y

After that we have to install webpack.

npm install webpack --save-dev

This way it will save the webpack dependency in our package.json

As a developer I would like to have a folder to organize and create some nice components.

Files Content

Check here the files.

hello-webpack/build/index.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Hello Webpack</title>

</head>

<body>

<div id="app"></div>



<script src="./bundle.js"></script>

</body>

</html>

Note that we are only loading the bundle.js file here.