Webpack Documentation

Webpack is a modern JavaScript module bundler that is widely used for building static assets for web applications. It allows developers to bundle JavaScript modules, CSS, and other assets into a single file or multiple files, optimizing the delivery of your application to the user.

Features of Webpack

Modularization: Webpack allows you to write your code in modules and import them where needed.
Code Splitting: You can split your code into chunks to load only the required parts of your application.
Loaders: Webpack has built-in loaders to process different types of files like CSS, images, and more.
Plugins: Plugins extend the functionality of Webpack by adding new features or modifying the behavior of the bundler.

Getting Started

To get started with Webpack, you need to install it in your project. You can do this by running the following command:

npm install --save-dev webpack webpack-cli

After installing Webpack, you can create a webpack.config.js file in your project root and configure it according to your needs.

Configuration

Here is an example of a basic Webpack configuration:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },
};

Useful Links