webpack.config.js Builder

Generate a webpack config you can actually read

Webpack is powerful but its configuration is notoriously verbose — entry, output, a module.rules array of loaders, a plugins list, and optimization settings that all have to line up. This builder produces a clean, commented webpack.config.js for your chosen entry point, loaders, and plugins, with mode-aware defaults for development versus production.

How it works

A webpack config is a single exported object (here a function of argv.mode so one file serves both dev and prod). The core pieces:

• entry / output — where the graph starts and where the bundle is written. Production output uses [contenthash] in the filename for cache-busting.
• module.rules — an array of loaders matched by a test regex. For example, CSS is handled by chaining loaders, which run right-to-left:

{ test: /\.css$/, use: ["style-loader", "css-loader"] }

• plugins — HtmlWebpackPlugin generates the HTML shell and injects script tags automatically.
• optimization.splitChunks — separates vendor and shared code into cacheable chunks when code splitting is enabled.

The mode field flips webpack’s built-in optimization presets and selects an appropriate devtool source-map type for each environment.

Tips and notes

• Loader order in a use array matters — webpack applies them right-to-left, so ["style-loader", "css-loader"] first resolves the CSS, then injects it.
• Use [contenthash] in production output filenames so browsers cache bundles and only re-fetch what changed.
• Prefer webpack 5 asset modules (type: "asset/resource") over the old file-loader/url-loader for images and fonts.
• Keep devtool cheap in development (eval-source-map) for fast rebuilds and complete but hidden in production (source-map).