What is a Webpack and when is it worth to use it?

30.05.2019 Angelika Siczek
what is a webpack

WHAT IS WEBPACK?

Webpack is a bundler, a tool that can pack many different formats into one JavaScript file. It’s going to extend .js, and it will do it by transforming and minifying the unnecessary code.

DO YOU NEED IT?

If you are building a large application with a complicated frontend that has many images, fonts, CSS elements, then Webpack will make your work much easier. However, if the application you are working on is small, that is, it will be based on one JavaScript file, without images, then Webpack can only complicate the work.

WHAT IS DEPENDENCY GRAPH?

Webpack creates a dependency graph for you. This is a mathematical principle in which the dependencies of objects of different origins are connected.

In practice, coding means a better solution than those used in the past. Then the JavaScript dependencies were arranged in a specific order. Another method was to combine and minify scripts with the build command. The solution is still far from ideal, because it still depends on manually determining the order of linked files. What’s more, for this reason the code could only communicate via global variables.

Now, however, you can use CommonJS or ES6 modules to create the above-mentioned dependency graph. Small files are used that define their own needs. The browser that does not support the require () command will use the file after packing by Webpack and will be able to work with it.

There are of course tools like Browserify that solve this problem. How will Webpack be better?

WHAT IS WEBPACK DOING?

Webpack lets you use the require () command on local fixed resources, i.e. files that are not JavaScript. If you use Webpack, it will search all calls for require () in the code and send them to the fileloader. This in turn converts require () to the URL. You can configure the type of URL to be created in Webpack. In addition, the fileloader will load the file into a fixed folder. After uploading the contents of the folder to the CDNa (Content Delivery Network) and after running the code, the image will certainly be loaded on the website.

What is important, Webpack will not only create a JavaScirpt file. It can also create a copy of permanent resources to the external location you specify. In addition, Webpack will create a JavaScript file so that require() will never have to be used in the browser. It will replace the Javascript script and it will be then used.

WHY IS WEBPACK BETTER THAN GRUNT, GULP OR BROWSERIFY?

Grunt and Gulp are tools for working with files and do not have the ability to create a real dependency graph. Browserify, in turn, is a tool for converting require() to call commands running in the browser. It creates dependency graph only for the source code. Webpack combines these features.

WHAT ARE THE ADVANTAGES OF WEBPACK?

1. Removes unnecessary permanent resources. A huge advantage for CSS users. You use images and CSS in the dist/ folder, which you badly need.

2. Easier code sharing. Webpack will create a specific .css file for you that will reduce the .js file size.

3. You control how resources are processed. If the image is below a certain weight, you can use the base64 code and enter it directly into JavaScript. If the JSON file is too big, you can load it from the URL.

4. Stable work. You will not be able to accidentally enter the code without the image.

5. Webpack will certainly slow you down at first, but when used correctly, it will speed up your work up in the future.

WHAT ARE THE WEBPACK DISADVANTAGES?

It does not make sense to hide that this solution has its drawbacks.

1. The documentation is written in a complicated language.

2. The source code is difficult to master, especially for beginners.

3. Webpack configuration is difficult for non-advanced users. So it’s better to look at ready examples.

4. Difficult syntax in the code that occurs throughout the documentation, and does not have many explanations.

WHAT IS DEV SERVER?

Dev server is a built-in application for local coding. It allows you to view changes in the code in real time, for free. In the case of large projects, such help is invaluable.

Traditional frontend programming relies only on global variables. CSS rules exist in the global namespace. Their use consists in manually setting the selectors. It is very difficult to not make any mistakes in a case of globally defined rules or images. Dependency graph comes with help in the form of Webpack. Automating this process for a large project can be a huge time saving, even if it requires prior configuration.

News Digitized / Stay Informed

Since the beginning of 2022, we are part of Unity Group. Now, by signing up for our newsletter, you will be kept up to date with information from our entire organization.

    By submitting the form you agree to receiving a newsletter that is sent by Unity S.A. based in Wrocław. You can withdraw your consent at any time. Additional information about the processing of available details provided in the privacy policy.

    *Required

    Andrzej-kurs-programowania

    Andrzej Szylar

    Chief Executive Officer

    E-mail:

    a.szylar@global4net.com
    Magda2

    Magdalena Paczyńska-Kamienik

    HR Manager

    Aleksandra

    Aleksandra Bielawska-Clegg

    HR Business Partner

    E-mail:

    Michal

    Michał Duława

    New Business Developer

    E-mail:

    Katarzyna

    Katarzyna Zajchowska

    Marketing Partner

    E-mail: