Core concepts: entry and output

Entry and output explained

Entry tells Webpack where to start bundling. It can be a single file or multiple entry points. Output specifies where to write bundled files and their names. Output filename patterns use [name], [hash], [contenthash] for dynamic naming.

Multiple entry points

Create separate bundles for different parts of your application.

module.exports = {
  mode: 'production',
  entry: {
    app: './src/app.js',
    vendor: './src/vendor.js'
  },
  output: {
    filename: '[name]-[contenthash].js',
    path: __dirname + '/dist'
  }
};

Output:

Creates: app-a1b2c3d4.js, vendor-x9y8z7w6.js

Use contenthash for cache busting

[contenthash] generates unique hashes based on file content. When content changes, the hash changes, forcing browsers to fetch the new version. [hash] changes on every build even if content is unchanged.

Quick check

Quick check: What does [contenthash] do in output filename?

• Generates unique hash based on file content for cache busting.
• Compresses the file automatically.
• Adds metadata to the bundle.