DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,274 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Webpack Unpacked: The Modern Way to Bundle Assets for your Website
Tapajyoti Bose
Tapajyoti Bose

Posted on • Updated on

Webpack Unpacked: The Modern Way to Bundle Assets for your Website

Managing assets can be a cumbersome task. Luckily we now have bundlers to streamline this task. In this article, we would be taking a look at Webpack, the most popular bundler available.

Webpack can seem extremely daunting at first glance, but this article will ensure that you have enough knowledge to configure Webpack on your own.

Let's Do It

What Exactly is Webpack?

Let's see how Google defines it: "webpack is an open-source JavaScript module bundler. It is made primarily for JavaScript, but it can transform front-end assets such as HTML, CSS, and images if the corresponding loaders are included. webpack takes modules with dependencies and generates static assets representing those modules."

You might have come across a few new terms like "loaders" in the definition. Let's take a look at a few terms before proceeding:

  • loaders: Loaders are third-party extensions that help webpack deal with various file extensions. For example, there are loaders for CSS, for images, etc.

    The goal of a loader is to transform files (other than JavaScript) in modules. Once the file becomes a module, webpack can use it as a dependency in your project.

  • plugins: Plugins are third-party extensions that can alter how webpack works. For example there are plugins for extracting HTML, CSS, for working with micro-frontends.

First Webpack App

Let's start small. Initialize a new node project by creating a new folder and using the command npm init -y. Install webpack related dependencies using npm i -D webpack webpack-cli

NOTE: Webpack dependencies should always be Dev Dependencies.

Initialize the following files:

// webpack.config.js

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
};
Enter fullscreen mode Exit fullscreen mode
<!-- public/index.html -->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Webpack Demo</title>
  </head>
  <body>
    <script src="../dist/bundle.js"></script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode
// src/index.html

console.log("Hello Webpack!")
Enter fullscreen mode Exit fullscreen mode

Finally, add the following script in your package.json:

"scripts": {
    "build": "webpack --config webpack.config.js"
}
Enter fullscreen mode Exit fullscreen mode

Now you can use npm run build to generate dist/bundle.js and run public/index.html to utilize the generated bundle.

Adding Loaders

You might be wondering "So much work for THIS?" Fret not my friend, here's where Webpack's magic starts.

Add file-loader to our project using npm i -D file-loader and update webpack.config.js

module.exports = {
    // ...
    module: {
        // defining the rules for additional modules, other than .js files
        // you can very well use rules for .js files too, eg: using babel-loader
        rules: [
            {
                // files the rule applies to (using RegEx is a good practice)
                test: /\.(png|jpe?g|svg)$/,
                // loaders & configuration
                use: [
                    {
                        loader: 'file-loader',
                        // if you skip the options, the default options will be used
                        options: {
                            name: '[name].[ext]',
                            outputPath: 'images/',
                        },
                    },
                ],
            },
        ],
    },
};
Enter fullscreen mode Exit fullscreen mode

Now you can import image files into your projects.

// src/index.js

// NOTE: you can use ES Modules import/export statements
import natureImg from './assets/nature.jpg'

const img = document.createElement('img')
img.src = natureImg
document.body.appendChild(img)
Enter fullscreen mode Exit fullscreen mode

Run the build script to generate the files. Open public/index.html

Page

Adding Plugins

Let's now optimize how we handle HTML so that webpack automatically adds the script files to the page. Add the html-webpack-plugin using the command npm i -D html-webpack-plugin.

// webpack.config.js

// ...
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    // ...
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html',
        }),
    ],
};
Enter fullscreen mode Exit fullscreen mode

Remove the script tag from public/index.html. Webpack will inject the scripts. It will also generate an additional index.html file in the dist folder, which you can use.

Using Dev Server

Repeatedly reloading the page quite often turns out a big pain. To solve this very problem, we have webpack-dev-server.

Install the dependency using npm i -D webpack-dev-server.

// webpack.config.js

// ...
module.exports = {
    // ...
    devServer: {
        port: 3000, // default: 8000
    },
};
Enter fullscreen mode Exit fullscreen mode

Finally you need to add another script:

"start": "webpack serve --config webpack.config.js"
Enter fullscreen mode Exit fullscreen mode

You can now use npm start to start up the webpack server

Wrapping Up

That's all you need to know about webpack... it's just a module bundler, which allows you to configure it as per your requirement using loaders and plugins. You can look at some other available plugins in the following articles:

Hope you have overcome your fear of using webpack and this article helps you in your development journey!

I am currently working on a project using a completely custom configured Webpack, feel free to check it out:

GitHub logo ruppysuppy / Crypto-Crowdfund

πŸ€‘πŸ’° Crowdfunding Platform backed by Ethereum Blockchain to bring your creative projects to life

Research says, writing down your goals on pen & paper makes you 21% to 39% more likely to achieve them. Check out these notebooks and journals to make the journey of achieving your dreams easier: https://www.amazon.com/Tapajyoti-Bose/e/B09VGDDHRR

Thanks for reading

Need a Top Rated Front-End Development Freelancer? Contact me on Upwork

Want to see what I am working on? Check out my GitHub

I am a freelancer who will start off as a Digital Nomad in mid-2022. Want to catch the journey? Follow me on Instagram

Follow my blogs for Weekly new Tidbits on Dev

FAQ

These are a few commonly asked questions I get. So, I hope this FAQ section solves your issues.

  1. I am a beginner, how should I learn Front-End Web Dev?
    Look into the following articles:

    1. Front End Development Roadmap
    2. Front End Project Ideas
  2. Would you mentor me?

    Sorry, I am already under a lot of workload and would not have the time to mentor anyone.

  3. Would you like to collaborate on our site?

    As mentioned in the previous question, I am in a time crunch, so I would have to pass on such opportunities.

Connect to me on

Top comments (2)

Collapse
 
brunojustino profile image
brunojustino

Don't you need a script for webpack-dev-server?

Collapse
 
ruppysuppy profile image
Tapajyoti Bose Author

Yeah, thanks a lot for pointing it out :)

Visualizing Promises and Async/Await 🀯

async await

☝️ Check out this all-time classic DEV post