Module 11: Build Tools & Development

Master modern JavaScript development tools and workflow optimization.

Back to Course|5 hours|Advanced

Build Tools & Development

Master modern JavaScript development tools and workflow optimization.

Progress: 0/4 topics completed0%

Select Topics Overview

Module Bundlers

Learn to use module bundlers like Webpack and Vite for efficient JavaScript development

Content by: Kriyansh Khunt

MERN Stack Developer

Connect

Webpack Configuration

Webpack is a powerful module bundler that transforms and bundles JavaScript modules for the browser.

Basic Webpack Setup

Code Example
// webpack.config.js
const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babelloader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    }
};
Swipe to see more code

Vite Configuration

Code Example
// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
    build: {
        outDir: 'dist',
        sourcemap: true
    },
    server: {
        port: 3000,
        open: true
    }
});
Swipe to see more code

Code Splitting

Code Example
// Dynamic imports for code splitting
import { lazy } from 'react';

const loadModule = async () => {
    const module = await import('./heavy-module.js');
    return module.default;
};

// Webpack code splitting
const HomePage = lazy(() => import('./pages/Home'));
const AboutPage = lazy(() => import('./pages/About'));
Swipe to see more code

Asset Optimization

Code Example
// webpack.config.js - Asset optimization
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    optimization: {
        splitChunks: {
            chunks: 'all',
            cacheGroups: {
                vendor: {
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendors',
                    chunks: 'all'
                }
            }
        }
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].[contenthash].css'
        })
    ]
};
Swipe to see more code

Mini-Project: Custom Build Tool

Code Example
// Simple build tool
const fs = require('fs');
const path = require('path');

class SimpleBundler {
    constructor(config) {
        this.config = config;
        this.modules = new Map();
    }

    bundle(entry) {
        const module = this.loadModule(entry);
        return this.generateBundle(module);
    }

    loadModule(filePath) {
        if (this.modules.has(filePath)) {
            return this.modules.get(filePath);
        }

        const content = fs.readFileSync(filePath, 'utf8');
        const module = {
            id: filePath,
            content: this.transformModule(content),
            dependencies: this.extractDependencies(content)
        };

        this.modules.set(filePath, module);

        module.dependencies.forEach(dep => {
            this.loadModule(dep);
        });

        return module;
    }

    transformModule(content) {
        // Simple transformation - replace require with module system
        return content.replace(/require\(['"]([^'"]+)['"]\)/g, (match, dep) => {
            return `__require__('${dep}')`;
        });
    }

    extractDependencies(content) {
        const deps = [];
        const requireRegex = /require\(['"]([^'"]+)['"]\)/g;
        let match;

        while ((match = requireRegex.exec(content)) !== null) {
            deps.push(match[1]);
        }

        return deps;
    }

    generateBundle(entryModule) {
        let bundle = `(function(modules) {
    function __require__(id) {
        const module = { exports: {} };
        modules[id](module, module.exports, __require__);
        return module.exports;
    }
    return __require__('${entryModule.id}');
})({`;

        this.modules.forEach((module, id) => {
            bundle += `'${id}': function(module, exports, require) {
                ${module.content}
            },
`;
        });

        bundle += '});';
        return bundle;
    }
}
Swipe to see more code

🎯 Practice Exercise

Test your understanding of this topic:

Previous Module

Module 10: Testing & Debugging

Next Module

Module 12: Production & Deployment

Additional Resources

📚 Recommended Reading

  • •Webpack Documentation
  • •Vite Guide
  • •npm Package Management
  • •Development Workflow Best Practices

🌐 Online Resources

  • •Webpack Academy
  • •Vite Getting Started
  • •npm Documentation
  • •Modern JavaScript Tooling

Ready for the Next Module?

Continue your learning journey and master the next set of concepts.

Continue to Module 12