DEV Community

Cover image for Optimizing Your Front-end Workflow with Webpack
Lovepreet Singh
Lovepreet Singh

Posted on


Optimizing Your Front-end Workflow with Webpack

πŸš€ Till now, we have talked about Backend Development topics like Scaling, Architecting, Deploying and Managing etc. But today we are going to see a most important thing i.e. Webpack

πŸ“ Problem that Webpack is Solving

When our project goes complex with so many dependencies and files, It gives us a headache. So, webpack in simple words solve this problem by allowing developers to organize their code into modules and then bundling those modules into a single file. Webpack is typically used to bundle and optimize front-end assets such as JavaScript, CSS, and images for use in web applications.

Webpack meme

Don't worry we will see a Simple example too further.

Webpack Working

  • Here is the Repo that you can follow along.

πŸš€ More about Webpack

There are some extra things apart from webpack config which it loads, like stylesheet loading, SVGs loading etc. These are called loaders. There are loaders and plugins in webpack.

  • Job of the loader is to simply work into the things when things are getting loaded. Like before creating the final single file there are certain requirements like Load CSS, Load SVGs and that is done via Loaders.

  • And After the final output file has been created if any more configurations has to be done that is done via Plugins.

πŸ₯ If you don't get it, Don't worry we will explain it further using Webpack config.

This is how our Webpack.config.js file looks like:-

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

module.exports = {
    entry: "./app/index.js",
    module: {
        rules: [
            // JavaScript can not load SVGs directly so we'll use someone's written code in 
            // svg-inline-loader [installed via npm]
            // more about svg-loader:-
                test: /\.svg$/,
                loader: 'svg-inline-loader'
            // Similar to svg-loader, we are using css-loader to load the css and style-loader to inject css into 
            // our files
            // more about css-loader:- 
            // Note:- css-loader is dependent on style-loader
                test: /\.css$/i,
                use: ["style-loader", "css-loader"],
            // Babel makes our modern JS (JS having features
            // like arrow functions etc) run on old browsers that donot support new JS.
                // This is a Regex which says any js file having js, jsx will be loaded by babel
                test: /\.(js)$/,
                use: "babel-loader"
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js"
    // After creating bundle.js file, to inject into our index.html file we need HTMLInjection that is provided
    // by the below plugin.
    // Note:- As written above, Loaders do work before generating the output and plugins do after the output...

    // It will generate index.html and will take bundle.js to inject into html
    // More:-
    plugins: [new HtmlWebpackPlugin()],

    // Two modes are there:- development, production. Production is more optimized and do minimize the code more
    mode: process.env.NODE_ENV == "production" ? "production" : "development"
Enter fullscreen mode Exit fullscreen mode

πŸ“ Dependencies we have used

npm i css-loader style-loader --save-dev
npm install --save-dev html-webpack-plugin
npm install webpack-dev-server --save-dev
npm install svg-inline-loader --save-dev
npm install webpack webpack-cli --save-dev                                   
Enter fullscreen mode Exit fullscreen mode

πŸ“ Some scripts that we added in package.json to run and serve

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack serve",
    "build": "NODE_ENV='production' webpack"
Enter fullscreen mode Exit fullscreen mode

That's all for today. I hope you got the taste of Webpack that you have to use while building your frontend Projects.

πŸŽ‰πŸ“’ Announcement: We are starting #100daysofcodechallenge for building an end to end Product. It is going to be #opensource

πŸ”₯ Product:- Customizable E-Commerce Store πŸš€

☺️ Contributions are welcomed and Good for Beginners starting Open Source

More Details Here

Top comments (8)

mohmmadaslam profile image
Mohmmad Aslam


lovepreetsingh profile image
Lovepreet Singh

Thanks πŸ™

mrexamples profile image

quiet informative, thumbs up!

lovepreetsingh profile image
Lovepreet Singh

Thanks Buddy. Do Share and Follow for more πŸš€

mrexamples profile image
Mrexamples • Edited

warmly welcome and for sure

corners2wall profile image
Corners to wall

@lovepreetsingh What tool do I need if my project doesn't have so much dependencies?

hartajsinghdev profile image

as always fire

lovepreetsingh profile image
Lovepreet Singh

Thanks Hartaj Bruhh πŸ”₯