It’s been already few years that the frontend in general started to use bundlers. These tools allow you to have different files and, thanks to some logic, retrieve the dependencies of each file.
I personally started with RequireJS which was the first, as much as I recall, to allow you to create a dependency system of your external files. I won’t bother you of how this works. Let’s just say that time passed and new tools emerged.

One of the most famous and successful tools is webpack, a bundler tool that runs on nodeJS and allows us the bundle all our files one single file (bundle) based on the dependencies that we have in our application.

Webpack is getting really popular because it gives to the developers lot of tools to build the application and it has a plugin system really flexible:

  • hot reload of the files (no more F5 or CTRL+R)
  • wide range of plugins
  • development server
  • code splitting strategy

Due to the wide range of settings and tools that webpack gives to us, at the beginning is not easy to set up a starting project with this tool. I still rememeber at the beginning, when the tools was at version 1.0 and the documention was really poor and confusing! Hard times!

Now, people have more knowledge, the documentation is better and we have more resources. I will more experience and tricks here.

Setting up

Create your project folder and set up npm and webpack

1
2
3
4
5
mkdir ecommerce
cd ecommerce
npm init
# ...
npm i --save webpack

Sweet, now let’s create a config file and a starter point, also called entry point

1
2
3
4
5
6
7
8
touch webpack.config.js
mkdir src
mkdir dist
cd src
touch index.js
touch alerts.js
cd ../dist
touch index.html

This is how your webpack.config.js should look like

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var path = require('path');

module.exports = {
entry: './src/index.js',
output: {
path: path.join(__dirname, '/dist'),
filename: 'bundle.js'
},
resolve: {
modules: [
'node_modules',
path.resolve(__dirname, '.')
}
}
}

For the sake of the example, let’s write something in our two modules

1
2
3
4
5
6
// index.js
import showAlert from './alerts.js'

document.addEventListener('DOMContentLoaded', function() {
showAlert('Page loaded!');
}, false);
1
2
3
4
// alerts.js
export default function showAlert(message) {
alert(message);
}

That’s it, now open your package.json file and add the following script and run it:

1
2
3
4
5
{  
"scripts": {
"build": "webpack --config webpack.config.js"
}
}

1
npm run build

We create our first bundle.
I will explain the configuration:

  • entry: the file/files where you want to start importing your files (or modules). It can be a string, an array or an object
  • output => path: where to save the output. Remember that we can have multiple files (but not here in this configuration)
  • output => filename: the name of the final file. There’s a proper configuration in case you are setting multiple entry points and naming them in different way
  • resolve => modules: here you telling to webpack this ‘webpack, when I import my modules, you have to look for them in the folders provided in this array’. In this case our folders are ‘node_modules’ and the current folder

Now, inside your index.html file, let’s write this

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>webpack example</title>
</head>
<body>

<script src='bundle.js'></script>
</body>
</html>

You are up and running for webpack!