How To Set up Webpack for Web Development

webpack

is a flexible bundler that provide you with tons of options and configuration so you can personalize your JavaScript projects, but with great power comes a great mess... err, I mean, great responsibility when configuring.

In this article I assume you know what

webpack

is, if not please check their great documentation. Also the code portrayed is run in Linux, but everything works similar in other GNU/Linux distros or Mac, to use in Windows you have to make some little configurations, mostly just install a good terminal and

npm

. If you found some error don't hesitate to comment or communicate with me. Well, let's go!

Use cases for

webpack

Webpack is used primarily to mix and match javascript code. You have code organized in several folders with some (or lot) of external packages, and you want this code to not block the webpage when a user request the page. Using

webpack

you can organize your code better by specify entry-points, ouput and which and when to load what. When you have a large (or growing) code-base, this order is crucial.

Here we must also remember the DOM event flow and how javascript code can affect user experience when requesting your webpage. So we use webpack not only to organize for also to compress/minify code in order to decrease loading time and improve user experience. This way users are happy, the company have more views and interaction, and you can boast about your (webpack's) optimization skills.

But a webpage is not only javascript, but HTML, CSS and assets as fonts, images and icons.

webpack

helps you to organize all of them using plugins. The idea behind plugins is that you use only the functionalities you need. Also you can choose what will happen to each thing, for example if you want to use a CSS preprocessor or if you want to use chunks for code split.

While there is no official word about when or how much use webpack, there is some points to consider:

If your webpage is not so complex, for example a single page with some CSS and little to none js, maybe adding webpack is too much.
If your webpage need too much data/state to render things, for example a blog or a complex webapp, maybe its better to use more scalable options like Server Side Rendering, CMS/CRM platforms, etc., instead of trying to make a big and complex webpack configuration/project.
if you will not use a plugin too much maybe you must consider other alternatives, for example if your website have a few style rules maybe instead of setup a plugin for a preprocessor you can use a normal CSS file.
if you are using a lot of assets or assets are too heavy, maybe using a CDN or services like cloudinary or Unsplash its a better idea than a plugin.
If you don't have enought experience with webpack you can
search for an already made
```
webpack
```
configuration template
.

Now we will consider some cases for setup webpack.

JS only webpack setup

in this setup you won't care about HTML or CSS or assets, just in making one or more JS modules to compile.

First step is to create a folder, then inside we initialize

npm

npm init -y
npm i -D webpack webpack-cli

If you will only need one output JS file the only remaining thing to make is a folder called

src/

and inside a file called

index.js

. Inside of this file you can put you code, call other files and import CSS. Now please open your file called

package.json

and in the section called "scripts" like this:

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack"
},

All that code will be output into a new file inside

dist/

folder just using this command:

npm start

You'll notice the new folder and a file called

main.js

will be produced. This file have already minified and uglyfy code, ready for copy/paste in your HTML!

I prepared a GitHub repository here so you can check how the code looks like.