Optimizing Your Front-end Workflow with Webpack

#webdev #javascript #tutorial #beginners

🚀 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.

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

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:- https://www.npmjs.com/package/svg-inline-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:- https://www.npmjs.com/package/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:- https://webpack.js.org/plugins/html-webpack-plugin/
    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"
};

📍 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

📍 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"
  },