Hi dear developer,
In this article, we are going to see a general overview of webpack. We will answer the following questions: what is Webpack? What are the core concepts you need to know to get started with it.

What is Webpack??

In general, any application we develop will have dozens of JavaScript files, images, templates, icons, etc. Organizing code into separate files is usually the best way to scale and manage large applications. However, this is not ideal for production we want users to download as few files as possible. The more files they have to download, the longer an application may take to load. It would be better if our code base was compacted into fewer files.This optimization is exactly what Webpack does.

On the left side of the above image, we have our files for development. This includes files from other libraries we've downloaded. These files get processed through webpack. On the right is what we'll end up having. Webpack compresses everything into as few files as possible. It can also do so much more, it can deal with various file types, deploy your application and even provide a development server.

---

There are four core concepts you need to know about webpack:

Entry:

The entry is the file where Webpack can start looking to build the bundle. We are allowed to pass in multiple entry points. The entry point file's responsibility is to list the dependencies required for our project.

Output:

We can tell Webpack where to place the bundled files by setting the output. By default, it'll put the file in a directory called dist. We're free to change its location to wherever we like.

Loaders:

By default, Webpack can understand only JavaScript code and most applications are built with a combination of file types and code. Therefore, Webpack needs some help to process additional file types. This process is the job of a loader. Loaders are a way to help Webpack understand the various file types in our project.

Plugins:

Plugins allow us to extend the functionality of Webpack. We can use plugins to delete files, start a server, deploy our app, etc.. Plugins make Webpack very flexible for developers.
Congtats, you've come to the end. If you want to dive deep, you can visit the official documentation here. Feel free to drop a comment bellow if you have any questions, suggestions or improvements.

---

My linkedIn: linkedin.com/in/ahmedou-yahya-4946b0183
My twitter: twitter.com/ahmedouyahya7