Webpack Config Generator

You’re setting up a webpack project from scratch. The config needs: babel-loader for JSX, css-loader + MiniCssExtractPlugin for CSS, HtmlWebpackPlugin for the HTML template, dev server with hot reload on port 3000, and production optimization with code splitting. The webpack docs are 200 pages and the config file is pure JavaScript with nested objects that are easy to misstructure.

Why This Generator (Not the Vite Config Generator)

PureDevTools has a Vite Config Generator for Vite projects. This tool generates webpack.config.js files — select mode, entry point, loaders (Babel, CSS, Sass, TypeScript), plugins (HtmlWebpackPlugin, MiniCssExtractPlugin, CleanWebpackPlugin), devServer options, and optimization settings. Also generates the corresponding npm install command. Everything runs in your browser.

What Is Webpack?

Webpack is a static module bundler for JavaScript applications. It recursively builds a dependency graph from your project’s entry point, then bundles every module into one or more output files. Beyond JavaScript, webpack handles CSS, images, fonts, and other assets through loaders, and extends the build pipeline with plugins for tasks like HTML generation, CSS extraction, and code minification.

Webpack is the build tool behind many popular frameworks and CLI tools — Create React App, Vue CLI, Next.js, and Angular CLI all use webpack under the hood.

How the Webpack Config Generator Works

This tool generates a complete webpack.config.js file based on your selections:

1. Choose mode — development (fast builds, source maps, unminified output) or production (optimized, minified output)
2. Set entry and output — define your bundle’s starting file, output directory, and output filename
3. Select loaders — add support for JS/JSX, TypeScript, CSS, Sass, and file assets
4. Add plugins — configure HtmlWebpackPlugin, MiniCssExtractPlugin, CleanWebpackPlugin, DefinePlugin, and CopyWebpackPlugin
5. Configure devServer — set port, enable Hot Module Replacement (HMR), and add API proxy rules
6. Set optimization options — enable code splitting, minimization, and Terser for production builds
7. Copy the config and install command — paste into your project and run the install command

All generation happens in your browser. Nothing is sent to a server.

Configuration Sections Explained

Mode

The mode option tells webpack to apply built-in optimizations appropriate for the environment:

Always set the mode explicitly. Without it, webpack defaults to production but emits a warning.

Entry and Output

The entry point is the file webpack starts from to build its dependency graph. Common values:

• ./src/index.js — standard JavaScript app
• ./src/index.ts — TypeScript app
• ./src/main.jsx — React app with JSX

The output section controls where the compiled bundle is written:

• path — absolute path to the output directory (always use path.resolve(__dirname, ...))
• filename — name of the output bundle file (bundle.js, [name].[contenthash].js for cache-busting)

Loaders

Webpack only understands JavaScript and JSON by default. Loaders transform other file types into modules:

Loader order matters. In a use array, loaders execute right-to-left: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'] means Sass is compiled first, then CSS resolved, then extracted.

Plugins

Plugins extend webpack’s capabilities beyond module transformation:

Dev Server

webpack-dev-server provides a development HTTP server with live reloading:

• Port — the port the server listens on (default: 3000)
• Hot reload (HMR) — Hot Module Replacement updates modules in the browser without a full page refresh, preserving application state
• Proxy — forwards API requests to a backend server, avoiding CORS issues in development (e.g. proxy /api to http://localhost:8080)

Optimization

When to Use MiniCssExtractPlugin vs. style-loader

Use style-loader in development — it injects CSS directly into the DOM at runtime, which is faster for HMR because style updates don’t require a reload.

Use MiniCssExtractPlugin in production — it extracts CSS into separate files that the browser can cache independently. When enabled in this generator, MiniCssExtractPlugin.loader automatically replaces 'style-loader' in the generated config.

A common pattern is to select which loader to use based on mode:

const styleLoader = process.env.NODE_ENV === 'production'
  ? MiniCssExtractPlugin.loader
  : 'style-loader';

Frequently Asked Questions

Do I need to install webpack globally? No. Install webpack locally in your project as a dev dependency. The generated install command handles this: npm install --save-dev webpack webpack-cli. Run webpack via an npm script in package.json:

"scripts": {
  "build": "webpack",
  "dev": "webpack serve"
}

What is the difference between file-loader and asset modules? file-loader is a third-party loader from webpack 4 era. In webpack 5, the equivalent is built-in as asset modules — use type: 'asset' for automatic inline/emit decisions, type: 'asset/resource' to always emit as a file, or type: 'asset/inline' to always inline as a data URL. The url-loader / asset modules option in this generator outputs Webpack 5’s native type: 'asset' syntax.

Why does my TypeScript project use babel-loader instead of ts-loader? babel-loader with @babel/preset-typescript is faster because it strips TypeScript types without performing type checking. Use it in combination with a separate tsc --noEmit step (e.g. in CI) for type validation. If you need webpack to report TypeScript type errors during the build itself, use ts-loader or fork-ts-checker-webpack-plugin instead.

How do I add source maps? In development mode, add devtool: 'eval-source-map' (fast, good quality). For production debugging, use devtool: 'source-map' (slower, separate .map files). Different devtool values offer different trade-offs between build speed and source map quality.

Is the generated config sent to a server? No. All config generation happens entirely in your browser. Your entry paths, output paths, and configuration choices never leave this page.