Installation and basic setup

Installation essentials

Webpack requires Node.js. Install webpack and webpack-cli as dev dependencies. The webpack-cli tool provides the command-line interface for bundling. A basic setup needs a configuration file that defines entry points, output locations, and loaders.

Install and configure

Create webpack.config.js with entry and output configuration.

npm install --save-dev webpack webpack-cli
npm run build

Output:

asset main.js 2.5 KiB [compared for emit] (name: main)
webpack 5.89.0 compiled successfully

Basic webpack.config.js

Configure entry point and output bundle location.

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  }
};

Output:

Configuration accepts: entry, output, mode, module, plugins, devServer

Mode impacts optimization

Set mode to 'development' for readable output and fast builds, or 'production' for optimized, minified output. Mode automatically configures optimization settings and affects bundle size significantly.