🚀 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!
🌱 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 ⭐! 😊