Webpack

Webpack is a JavaScript module bundler built and maintained by an independent open-source community, free to use under the MIT license. It ties for #14 among dev tools in usage surveys at roughly 18.4% share. It combines a web app's JavaScript, CSS, images, and other assets into optimized output bundles via a loader/plugin system, and remains widely used in existing codebases even as newer tools like Vite capture more new-project share.

Example

A webpack.config.js file declares an entry point, an output location, and loader rules for handling non-JS file types.

// 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$/, use: ['style-loader', 'css-loader'] },
      { test: /\.jsx?$/, exclude: /node_modules/, use: 'babel-loader' }
    ]
  },
  mode: 'production'
};

Getting started

Webpack installs as a dev dependency in a JS project alongside its CLI.

# install webpack and its CLI as dev dependencies
npm install --save-dev webpack webpack-cli

# run a build using webpack.config.js in the project root
npx webpack --mode production