Webpack Academy #0: What is webpack and why use it?
Tags: webpack, javascript, webdev
Published: 2021-07-30 11:14:47

![5i2nmh](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i54o4jmucbflmpkzwhei.jpeg)

Welcome to my new academy, Webpack Academy !

I will try to share my webpack knowledges !

Let's start !

### Fast presentation

*From webpack doc:*

> At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph which maps every module your project needs and generates one or more bundles.

To summarise, `Webpack` will help you to handle **import/export** of your file in your project, and it will put all of your code in one file called **bundle**.

### Why use webpack?

Legit question, if you have ever build javascript project, you should now the problems about import `js` file in your application !

I will show you a brief illustration of what we did before !

```html
<script src="jquery.min.js"></script>
<script src="jquery.some.plugin.js"></script>
<script src="main.js"></script>
```
 
We need to import **all dependencies** on by one and in the `correct order`, if we want to import a **new lib**, we need to import it in the `correct order`, because if this new lib depends on `jquery`, we need to import it after import `jquery`!

You think you can handle it, yes you can but imagine if your need to import 100 libs, this can be **CHAOTIC**.

At this moment we create manually bundle file

```javascript
// build-script.js
const scripts = [
   "jquery.min.js",
   "jquery.some.plugin.js",
   "main.js",
].concat().uglify().writeTo("bundle.js")

<script src="bundle.js"></script>
```
We fix the multiple import of scripts, but don't fix the dependencies between libs.


### Web + Pack = Webpack

**Webpack** handle only `.js` and `.json` file natively. But we will see in the next article how to handler other file !

You only need to give an entry point to webpack, and it will create a **dependencies tree** 🌳 from this file and check all other file !

From now, we don't need to handle dependencies order by our hands !

### Example

Context: We have two files that export one variable:

first.js

```js
export const first = 1
```

second.js

```js
export const second = 2
```

We have another file that import both file

three.js

```js
import { first } from './first'
import { second } from './second'

export const three = first + second
```

And finally the main file that will console.log the `three` variable

main.js
```js
import { three } from './three'

console.log(three)
```

With the old tips we should use something like this:

```javascript
// build-script.js
const scripts = [
   "one.js",
   "second.js",
   "three.js",
   "main.js",
].concat().uglify().writeTo("bundle.js")

<script src="bundle.js"></script>
```
But with `webpack`, we don't need to handle dependencie order !

Let's run our code with the `webpack.config.js`

```js
const path = require("path")

const config = {
    mode: "development",
    // Webpack start from this entry point
    entry: {
        myApp: [
            "./src/main.js",
        ],
    },
    // This is the output of Webpack
    output: {
        // From current folder + dist folder that will contains all bundle
        path: path.resolve(__dirname, "dist/"),
        filename: "bundle.js"
    },
}

module.exports = config
```

Don't be afraid by this `config file`, during the academy we will add and change few, but a the end you will understand all line ! 

To summarise this config, we indicate to `webpack` the entry point of our project, and we indicate the output file name and path !

Let run `webpack` command ! (you need to install webpack CLI before)

And finally go to dist folder and check the `bundle.js` file.

Try it

```
node dist/bundle.js
3
```

Yes it's work !

If you want to try, fetch my repository from this commit ! 👇

https://github.com/Code-Oz/webpack-academy/tree/e49ca8d675b985551ec98dcf572edbfa07db4e33

I hope you want to learn more about `webpack` in my academy !

---

I hope you like this reading!

🎁 You can get my new book `Underrated skills in javascript, make the difference` for FREE if you follow me on [Twitter](https://twitter.com/code__oz) and MP me 😁

Or get it [HERE](https://codeoz.gumroad.com/l/RXLYp)

🎁 [MY NEWSLETTER](https://www.getrevue.co/profile/code__oz)

☕️ You can [SUPPORT MY WORKS](https://www.buymeacoffee.com/CodeoZ) 🙏

🏃‍♂️ You can follow me on 👇

🕊 Twitter : [https://twitter.com/code__oz](https://twitter.com/code__oz)

👨‍💻 Github: https://github.com/Code-Oz

And you can mark 🔖 this article!