4

Webpack Unpacked: A Pragmatic Guide

2 years ago

source link: https://dev.to/ruppysuppy/webpack-unpacked-a-pragmatic-guide-486f
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

neoserver,ios ssh client

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.

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 modeExit 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 modeExit fullscreen mode

// src/index.html

console.log("Hello Webpack!")

Enter fullscreen modeExit fullscreen mode

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

"scripts": {
    "build": "webpack --config webpack.config.js"
}

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

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:

ruppysuppy / Crypto-Crowdfund

🤑💰 Platform backed by Ethereum Blockchain to bring your creative projects to life

Thanks for reading

Looking for ways to boost your productivity? Check out my Bi-Weekly Productivity Blogs on Medium

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.

I am a beginner, how should I learn Front-End Web Dev?
Look into the following articles:
Would you mentor me?

Sorry, I am already under a lot of workload and would not have the time to mentor anyone.
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

Recommend

About Joyk

Aggregate valuable and interesting links.
Joyk means Joy of geeK