Webpack

Webpack

Webpack is a module bundler for JavaScript applications. It takes modules with dependencies and generates static assets representing those modules. In simple terms, it bundles your JavaScript files (and optionally other assets like CSS, images, etc.) into a single file (or a few files) that browsers can understand.

Webpack is especially useful for modern front-end development where code is split into multiple modules.

Key Concepts of Webpack

  1. Entry: The starting point of your application (e.g., index.js).
  2. Output: Where the bundled files will be saved (e.g., dist/main.js).
  3. Loaders: Transform files before bundling (e.g., converting SCSS to CSS or ES6 to ES5).
  4. Plugins: Perform more complex tasks like minifying code, generating HTML, etc.

Simple Example

Suppose you have this project structure:

my-app/
├── src/
│   ├── index.js
│   └── message.js
├── dist/
└── webpack.config.js

src/message.js

export const message = "Hello, Webpack!";

src/index.js

import { message } from './message';

console.log(message);

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js', // Entry point
  output: {
    filename: 'bundle.js', // Output file
    path: path.resolve(__dirname, 'dist'), // Output directory
  },
  mode: 'development', // 'development' or 'production'
};

Steps to bundle with Webpack

  1. Install Webpack:
npm init -y
npm install --save-dev webpack webpack-cli
  1. Run Webpack:
npx webpack
  1. After bundling, dist/bundle.js will contain the combined code from index.js and message.js.

✅ Summary: Webpack allows you to modularize your code and bundle everything into optimized files for the browser. It can handle JavaScript, CSS, images, and more using loaders and plugins.

Loaders

Loaders are used to transform files before bundling. For example, you can convert SCSS to CSS, transpile ES6 to ES5, or load images.

Example: CSS Loader

Project Structure:

my-app/
├── src/
│   ├── index.js
│   └── style.css
├── dist/
└── webpack.config.js

src/style.css

body {
  background-color: lightblue;
}

src/index.js

import './style.css';

console.log("CSS loaded with Webpack!");

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.css$/,       // For all .css files
        use: ['style-loader', 'css-loader'], // Apply loaders
      },
    ],
  },
  mode: 'development',
};

Install loaders:

npm install --save-dev style-loader css-loader

Explanation:

  • css-loader interprets @import and url() in CSS.
  • style-loader injects CSS into the DOM.

When you run npx webpack, your CSS gets bundled into bundle.js.

Plugins

Plugins perform broader tasks like optimizing bundles, generating HTML, or cleaning output folders.

Example: HTML Webpack Plugin

Install plugin:

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

webpack.config.js

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

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true, // cleans the output folder before build
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html', // source HTML
      filename: 'index.html',       // output HTML
    }),
  ],
  mode: 'development',
};

src/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Webpack Example</title>
</head>
<body>
    <h1>Webpack is working!</h1>
</body>
</html>

Explanation:

  • HtmlWebpackPlugin automatically injects your bundle.js into the HTML file.
  • This avoids manually adding <script> tags every time the bundle changes.

✅ Summary:

  • Loaders → transform files (CSS, SCSS, images, JS).
  • Plugins → perform global tasks (HTML generation, bundle optimization, cleaning output folder).

Leave a Reply