Bundling your application - webpack
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.
Create your project folder and set up npm and webpack
npm i --save webpack
Sweet, now let’s create a config file and a starter point, also called entry point
This is how your webpack.config.js should look like
var path = require('path');
For the sake of the example, let’s write something in our two modules
That’s it, now open your package.json file and add the following script and run it:
"build": "webpack --config webpack.config.js"
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
You are up and running for webpack!