Webpack : How do I bundle multiple javascript files into a single output file?

Webpack is a static module bundler for modern JavaScript applications. It processes the application by recursively building a dependency graph of all required modules and then bundles them into one or more output files.

The basic steps to bundle multiple JavaScript files into a single output file are as follows:

1. Install and Configure Webpack

First, install Webpack in your project. Typically, it is installed as a development dependency:

bash
npm install --save-dev webpack webpack-cli

2. Create the Webpack Configuration File

Create a webpack.config.js file in the project's root directory. This file contains all configuration settings. A minimal configuration file could be written as:

javascript
const path = require('path');

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

In this configuration, the entry property defines the entry point from which Webpack begins building the dependency graph. The output property specifies how and where the bundle is generated. In this example, all JavaScript files are bundled into a single bundle.js file located in the dist directory.

3. Create the Entry File and Other Modules

Ensure your project includes a src/index.js file, which serves as Webpack's default entry point. You can import other modules here:

javascript
// src/index.js
import moduleA from './moduleA';
import moduleB from './moduleB';

console.log(moduleA.message);
console.log(moduleB.message);

Here, moduleA and moduleB may be other JavaScript files in the project that can also import additional modules.

4. Bundle the Application

After configuring everything, run the following command to bundle the application:

bash
npx webpack

This will generate dist/bundle.js, which contains all code from src/index.js and its dependencies.

5. Include in HTML

Finally, include the generated bundle.js file in your HTML:

html
<script src="dist/bundle.js"></script>

Once set up, loading the HTML file in a browser will include all JavaScript code and dependencies in a single file.

By following these steps, you can bundle multiple JavaScript files into a single output file, reducing the number of network requests and improving page load performance.