Compare the Old-School Way of Manual Code Management vs. Webpack's Magic: Reduce File Size and Maximize Efficiency! 🧙‍♂️

🚀 Webpack: Before & After – A Game Changer! ⚡

Discover how Webpack transforms your project!

We’re diving into a side-by-side comparison of a project without Webpack vs. with Webpack. 🛠️ This will show you just how much more efficient your workflow can be with bundling and optimizations!

Webpack Preview Link

🌱 Without Webpack: The Old Way 💾

When you structure a project without Webpack, you manually manage everything – from scripts to modules. Here's how your project setup would look:

🔧 Project Structure

webpack-example-no-webpack/
├── dist/
│   └── index.html  # Main HTML file
├── src/
│   ├── math.js     # Utility functions
│   ├── module.js   # Dynamically loaded
│   └── index.js    # Main entry point
└── .gitignore

⚙️ How the Code Looks Without Webpack

1. Utility Functions (math.js)

This file handles simple math utilities.

// src/math.js
function add(a, b) { return a + b; }   // Addition 
function subtract(a, b) { return a - b; }   // Subtraction
function multiply(a, b) { return a * b; }   // Multiplication
function divide(a, b) { return a / b; }   // Division

// Export as MathUtils to be used globally
export const MathUtils = { add, subtract, multiply, divide };

2. Dynamically Loaded Module (module.js)

This file loads dynamically when needed.

// src/module.js
function greet() {
  console.log('Hello from dynamically loaded module!');
}

// Exposing greet globally
window.GreetModule = { greet };

3. Main Entry Point (index.js)

Manages interactions with the browser and handles dynamic module loading.

// src/index.js
import { MathUtils } from "./math.js";

document.getElementById('load-module').addEventListener('click', function () {
  const script = document.createElement('script');
  script.src = '../src/module.js';  // Load module.js dynamically
  document.body.appendChild(script);

  script.onload = function () {
    GreetModule.greet();  // Trigger greet after loading
  };
});

console.log(`5 + 10 = ${MathUtils.add(5, 10)}`);

---

⚡ With Webpack: The Modern Approach 💥

Webpack introduces bundling, code-splitting, and tree-shaking to make your code faster and more efficient. Here's what the structure looks like with Webpack:

🔧 Project Structure

webpack-example-with-webpack/
├── dist/
│   ├── index.html        # HTML file with bundled JS auto-included
│   └── main.bundle.js    # Bundled JS
├── src/
│   ├── math.js           # Utility functions (tree-shakable)
│   ├── module.js         # Dynamically loaded module
│   └── index.js          # Main entry point
├── webpack.config.js      # Webpack configuration
└── package.json

⚙️ How the Code Looks With Webpack

1. Utility Functions (math.js)

Functions are the same, but now Webpack will only include what's actually used.

// src/math.js
export function add(a, b) { return a + b; }   // Tree-shakable utilities
export function subtract(a, b) { return a - b; }
export function multiply(a, b) { return a * b; }
export function divide(a, b) { return a / b; }

2. Dynamically Loaded Module (module.js)

Now loaded with Webpack's import() for code splitting.

// src/module.js
export function greet() {
  console.log('Hello from dynamically loaded module!');
}

3. Main Entry Point (index.js)

// src/index.js
import { add, multiply } from './math';  // Only used functions imported

console.log(`5 + 10 = ${add(5, 10)}`);

document.getElementById('load-module').addEventListener('click', () => {
  import('./module').then(module => {
    module.greet();  // Loaded dynamically by Webpack
  });
});

🔧 Webpack Configuration (webpack.config.js)

const path = require('path');

module.exports = {
  mode: 'production',  // Enables optimizations
  entry: './src/index.js',
  output: {
    filename: 'main.bundle.js',  // Bundled file
    chunkFilename: '[name].chunk.js',  // For dynamically imported modules
    path: path.resolve(__dirname, 'dist'),
  },
  optimization: {
    usedExports: true,  // Enables tree shaking
  },
};

---

🔍 What's the Difference?

🎯 Without Webpack

• 📝 Manually handle script loading.
• 🛑 No optimization, tree shaking, or code splitting.
• 📂 Larger file sizes and unoptimized code.

⚡ With Webpack

• 🚀 Automatic bundling and minification.
• 🌲 Tree shaking: Only used code gets included.
• ⏳ Code splitting: Load parts of the code only when needed.

---

🌟 Want to Explore This?

Check out the full repository here:

https://github.com/dharam-gfx/webpack-example

If you find this helpful, give the repo a ⭐! 😊