On this page

The output configuration options tell webpack how to write the compiled files to disk. Note that while a configuration can have multiple entry points, it can specify only one output.

The minimum requirement for the output property is to set it to an object and provide an output.filename for the output file(s):

export default {
  output: {
    filename: 'bundle.js',
  },
};
JavaScript

This configuration writes a single bundle.js file into the dist directory.

If your configuration produces more than one "chunk", as happens with multiple entry points or with plugins like CommonsChunkPlugin, use substitutions to give each file a unique name:

import path from 'node:path';
import { fileURLToPath } from 'node:url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  entry: {
    app: './src/app.js',
    search: './src/search.js',
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, './dist'),
  },
};

// writes to disk: ./dist/app.js, ./dist/search.js
JavaScript

Here is a more involved example that uses a CDN together with hashes for assets:

export default {
  // ...
  output: {
    path: '/home/proj/cdn/assets/[fullhash]',
    publicPath: 'https://cdn.example.com/assets/[fullhash]/',
  },
};
JavaScript

When the eventual publicPath of the output files is not known at compile time, you can leave it blank and set it dynamically at runtime through the __webpack_public_path__ variable in your entry point file:

__webpack_public_path__ = myRuntimePublicPath;

// rest of your application entry
JavaScript