DEV Community

loading...
Cover image for Webpack Academy #0: What is webpack and why use it?

Webpack Academy #0: What is webpack and why use it?

CodeOz
Creator of https://www.chillflix.art πŸ’» 4+ years of coding ! https://twitter.com/Code__ozπŸ“ Love writting article dev and sharing ressources !
・Updated on ・3 min read

5i2nmh

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 !

<script src="jquery.min.js"></script>
<script src="jquery.some.plugin.js"></script>
<script src="main.js"></script>
Enter fullscreen mode Exit fullscreen mode

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

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

<script src="bundle.js"></script>
Enter fullscreen mode Exit fullscreen mode

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

export const first = 1
Enter fullscreen mode Exit fullscreen mode

second.js

export const second = 2
Enter fullscreen mode Exit fullscreen mode

We have another file that import both file

three.js

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

export const three = first + second
Enter fullscreen mode Exit fullscreen mode

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

main.js

import { three } from './three'

console.log(three)
Enter fullscreen mode Exit fullscreen mode

With the old tips we should use something like this:

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

<script src="bundle.js"></script>
Enter fullscreen mode Exit fullscreen mode

But with webpack, we don't need to handle dependencie order !

Let's run our code with the webpack.config.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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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!

If you want to have a nice article to read about web dev, you can subscribe to my FREE newsletter & get a cheatlist about Javascript at this url πŸ‘‡

🎁 MY NEWSLETTER

β˜•οΈ You can SUPPORT MY WORKS πŸ™

πŸƒβ€β™‚οΈ You can follow me on πŸ‘‡

πŸ•Š Twitter : https://twitter.com/code__oz

πŸ‘¨β€πŸ’» Github: https://github.com/Code-Oz

And you can mark πŸ”– this article!

Discussion (4)

Collapse
mogneur profile image
mogneur

Nice article Code Oz !

Collapse
codeoz profile image
CodeOz Author

Thanks mogneur

Collapse
imjituchauhan profile image
Jitu Chauhan

Thank you for this amazing WebPack tutorial Series for initial start.

Collapse
codeoz profile image
CodeOz Author

thank you for your comment Jitu, it's very motivating