Module Bundlers: Webpack

Problem: Using one JS file inside another  

Suppose you have two files: 

math.js (exports a function)  
main.js (wants to use that function) 


Issue: Browser doesn’t understand imports automatically  
  1. main.js doesn’t know about math.js  
  2. There’s no built-in way to "import" functions before ES6 modules  
  3. This leads to errors like add is not defined

Common workaround before module bundlers

Using <script> tags (manual loading)

html
<script src="math.js"></script>
<script src="main.js"></script>

Problem:  
  1.    Order matters! math.js must be before main.js  
  2.   Too many <script> tags if we have multiple files  
  3.   No way to bundle or optimize files  

How Webpack Helps

1. Allows using import/export syntax


2. Webpack bundles all files into one

Instead of manually loading multiple scripts, Webpack combines them into a single bundle.js, which can be included in HTML:
<script src="bundle.js"></script>

3. Optimizes the code

  1.    Removes unused code (tree shaking)  
  2.    Minifies for better performance 

Conclusion 

  1. Before module bundlers → We manually managed multiple <script> files.  
  2. Webpack → Automates bundling, resolves dependencies, and optimizes code. 

WEBPACK

1. Dependency Resolution

  1. Every app has a main JS file (the entry point).  
  2. This file imports other files, which may import even more files.  
  3. Webpack scans all `import` and `export` statements to track dependencies until it finds files with no further imports.  
  4. Dependencies are not just JS files—they can be CSS, images, or libraries (like Lodash


2. Bundle

  1. Once dependencies are resolved, Webpack bundles everything into one or more files.  
  2. Bundling combines all necessary files into a single `bundle.js` (or multiple optimized chunks).  
  3. This reduces HTTP requests and ensures correct loading order.

3. Transform

  1. During the bundle process, if there are any non-JS files such as css files, webpack 1st "transforms" the css into js file (modules with imports/exports). 
  2. At runtime, Webpack injects the CSS into a `<link>` tag, making it work like a regular CSS file.


EXAMPLE

A new file called "webpack.config.json" needs to be created. A basic config should have 3 things
  1. Entry file name
  2. Output folder path for bundled file
  3. Output file name for bundled file

Let's say we have a Calculator app. 
webpack-basic-example/
│── src/
│   ├── index.js
│   ├── sum.js
│   ├── product.js
│   ├── utils.js
│   ├── data.js
│── dist/
│── package.json
│── webpack.config.js




 








Now Run

npm run build
This generates a dist/bundle.js file.

HANDLING CSS FILE

Webpack doesn’t understand CSS by default, so we need to install loaders to handle it. To handle CSS file, we need to modify the webpack file 

Install CSS Loaders 

npm install style-loader css-loader --save-dev
  1. style-loader : Injects CSS into the page.  
  2. css-loader : Lets Webpack understand CSS import statements.  
import the CSS in JavaScript 
index.js 
import './styles.css';  // Importing CSS
import './sum.js';
import './product.js';

Update Webpack Config 

Modify webpack.config.js to add a rule for CSS files:  

Rebuild the Project 

npm run build
This will inject the CSS dynamically when bundle.js is loaded.

Open in Browser 

- Open dist/index.html  
- The background should now be light blue🎉  

index.html file missing from dist? 😉

By default, Webpack does not generate an index.html file automatically. It only creates bundle.js. To generate an index.html file inside dist/, you need to use the html-webpack-plugin

How to Generate index.html Automatically

Install html-webpack-plugin:

npm install html-webpack-plugin --save-dev

Update webpack.config.js:

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

module.exports = {
    entry: './index.js', 
    output: {
        filename: 'bundle.js', 
        path: path.resolve(__dirname, 'dist') 
    },
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.css$/,  // Apply this rule to .css files
                use: ['style-loader', 'css-loader']
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html',  // Use our own template
            filename: 'index.html'         // Output file
        })
    ]
}; 








Comments

Post a Comment

Popular posts from this blog

Inside the JavaScript Memory Box: Visualizing Variables, References, and Copies

Image
There is a difference in the way JavaScript refences variables based on whether they are primitive or non-primitive Primitive Types: string, number, bigint, Boolean, symbol, null, undefined Non-Primitive: Arrays, Objects Each variable in JS is stored in a memory “box” Assignments: But when another variable tries to assign this value, JS thinks “wait, is this a primitive or non-primitive? Because if it is primitive, I will create a new box for this new variable with the same content. But if it’s not, I will just create a refence to the existing box” PRIMITIVE: Analogy: Let's say you have a note that says 5. You give a copy of this note to your friend.  Friend now updates this copy to 10. But your copy still says 5 let a = 5; let b = a; b = 10; //a remains unchanged NON-PRIMITIVE: Analogy: Let's say you have a note with address "123 Elm Street". In that house lives a cat named "Tom". You give a copy of this note to your friend. Friend now goes t...
Read more

React & State Management: All Concepts

Section 1: Fundamentals 1. Counter with increment, decrement, reset — useState Remember: prev is needed when the new state depends on the old state. When you're setting a hardcoded value like 0, you just pass 0 directly. Why:  reason prev matters — if multiple state updates happen in the same render cycle, React batches them. Using prev guarantees you're working off the latest state, not a stale snapshot. 2. Toggle show/hide paragraph — useState Remember: onClick={toggle} — pass the function reference, not the call. onClick={() => toggle()} — also fine, arrow function that calls toggle when clicked. onClick={toggle()} — calls toggle immediately during render, setVisible triggers re-render, toggle calls again, infinite loop. Why: JSX evaluates expressions inside {} during render. toggle() is an expression that executes immediately. React doesn't get a chance to attach it as a handler — it just runs it right there, state updates, component re-renders, runs again. ...
Read more

React: Communication between components

Parent to Child: Props Child to Parent Callback Props (advanced props) Controlled Components useImperative hook  Nested Tree: useContext Sibling: Lift State Up PARENT TO CHILD: Props App.jsx Users.jsx <User name ={user} /> function User({ name }) {  return <h1> {name} </h1> } CHILD TO PARENT a) Callback Props (Advanced Props) Parent.jsx Child1.jsx export function Parent() {   function sayHello () {     alert(“hello triggered”)   }   <Child1 onSayHello ={ sayHello } /> } function Child1({ onSayHello }) {   return <button onClick={ onSayhello() }>          Click       </button> } b) Controlled Components Usually used in forms. Controlled components mean the parent owns the state, the child renders inputs, and every ch...
Read more