Modularization

Formal Definition

Modularization:
Modularization is a software design technique in which a program is divided into independent, self-contained modules, where each module performs a specific functionality and can be developed, tested, and maintained separately while interacting with other modules through well-defined interfaces.

Webpack:
Webpack is a JavaScript module bundler that analyzes application dependencies, builds a dependency graph, and bundles JavaScript, CSS, images, and other assets into optimized output files. It supports modularization by enabling loaders, plugins, code splitting, and optimizations for both development and production environments.

Got it ✅. I’ll keep topics and subtopics as they are, remove unnecessary stories, keep keywords, and make the statements easy to understand without reducing the paragraph length. Here’s the rewritten version:

Modularization and Webpack

Webpack

Webpack facilitates modularization by bundling code and assets into optimized static files. It structures applications into small, maintainable modules, builds a dependency graph, and combines all required modules into bundles for the browser.

How Webpack supports modularization

Enables standard module syntax: Supports ES2015 import/export and CommonJS require() for readable code and dependency management.
Manages dependency graph: Builds an internal graph from entry points by tracing all import and require statements, including third-party libraries.
Extends modularity to other assets: Loaders convert CSS, images, and fonts into modules, making all front-end assets reusable.
Optimizes bundles for performance:
- Tree shaking: Removes unused code for smaller bundle size.
- Code splitting: Divides code into smaller chunks, reducing initial load time.
- Bundle splitting: Separates vendor code and app code for better caching.

Modularization workflow with Webpack

Organize code into modules: Split application into small files.
Define entry point: Set main file in webpack.config.js.
Configure loaders: Example – css-loader, style-loader for CSS.
Manage dependencies: Use import for JavaScript, CSS, or assets.
Build bundle: Webpack traces dependencies and generates output files.

Webpack Components

Loaders
Dev Server (webpack-dev-server)
Plugins
Entry
Output

Babel Compiler

Babel is a JavaScript transcompiler that converts ES6+ code into backward-compatible JavaScript. It helps developers use modern features while supporting older browsers. It can also compile TypeScript into JavaScript.

Installation of Webpack

Install webpack globally: npm install webpack -g
Install Babel: npm install babel-core babel-loader -save
- babel-core: Babel itself
- babel-loader: Integrates Babel with webpack

Library Bundles

When app code changes, rebuilding the entire bundle is inefficient. A better method is to create two bundles – one for app code and one for libraries. CommonsChunkPlugin is used for this separation.

Webpack.config.js

module.exports = {
  entry: {
    app: '/src/App.jsx',
    vendor: ['react', 'react-dom', 'whatwg-fetch']
  },
  output: {
    path: '/static',
    filename: 'app.bundle.js'
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js')
  ],
  module: {
    loaders: [
      {
        test: /\.jsx$/,
        loader: 'babel-loader',
        query: { presets: ['react', 'es2015'] }
      }
    ]
  }
};

Webpack Server as Proxy

devServer: {
  port: 8000,
  contentBase: 'static',
  proxy: {
    '/api/*': {
      target: 'http://localhost:3000'
    }
  }
}

5.8 Modularization and Webpack

Modularization is a technique for code organization by splitting the code into smaller parts. The modular architecture involves breaking a program into sub-programs called modules. Each module is associated with specific functionality and helps in understanding the entire code.

React uses a component structure for modularizing. Each component has its own file, and we use import and export to access code.

Webpack in React is a JavaScript module bundler used to bundle and manage dependencies. Webpack combines JavaScript files, CSS files into a single bundle that can be loaded by the browser.

To use webpack in React, we configure it using the webpack.config.js file, which has the following sections:

Entry

Refers to the entry point of React application.
All React components branch out from app.js, which is inside index.js.
Defined in entry attribute.

Output

After processing, webpack creates a bundle file.
Output specifies the name and location of the final output file.
Example:
- Path: /dist (bundle output path)
- Filename: bundle.js

Loader

Works like a compiler, checking file types and assigning appropriate loaders.
Rules include:
- test → checks for particular file type (.js, .jsx, .css).
- use → specifies list of loaders.
- exclude → files not to be processed.
- include → files to be processed.

Example:

test:/\.css$/,  
use:['style-loader','css-loader']

Plugins

Webpack provides a plugin interface for additional functionality.
Makes Webpack more flexible.

Mode

Helps developers set development mode or production mode.

devServer

Used to quickly build and test applications.
Example: run at port: 3000.

Use of Babel

Babel is a JavaScript compiler that converts modern JavaScript into browser-compatible versions.

Transpiles modern JavaScript for React Components.
Allows developers to use the latest JavaScript features without worrying about browser support.

Demo Example

Step 1: Create project folder (e.g., webpack_example), add index.html, initialize npm using npm init -y.

Step 2: Install React and Babel packages.

React → npm i react react-dom
Babel → npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader css-loader style-loader

Step 3: Create webpack.config.js and edit with:

Entry: app/index.js
Output: dist/bundle.js
Loaders: babel-loader, css-loader, style-loader

Step 4: Create folders app and dist.

Inside app: add index.js, anotherModule.js, mystyle.css.
Webpack bundles output to bundle.js inside dist.

Step 5: Install jquery using npm.

Step 6: Source files:

index.js → imports React, CSS, module, and renders output.
anotherModule.js → exports variable.
mystyle.css → contains style rules.
index.html → links dist/bundle.js.

Step 7: Run and build application → npm run start.

Step 8: Open index.html in browser to view output.

Program Explanation

Created index.js, anotherModule.js, and mystyle.css, bundled using webpack, displayed on browser.
In index.js, React renders a Welcome message with styles from mystyle.css. All files are bundled together using webpack.