Webpack config generator
Generate a webpack.config.js with entry and output, ts / babel / css / sass / asset loaders, HtmlWebpackPlugin and friends, plus devServer settings for HMR, historyApiFallback and proxying.
Runs in your browserEvery computation happens in your browser — your data never leaves this device.
Basics
Entry, output and mode decide the skeleton of the config.
Loaders
Tick the file types the project really uses — anything unticked stays out of the rules array.
Plugins
devServer
Generated config
webpack.config.jswebpack, webpack-cli, typescript, ts-loader, css-loader, style-loader, html-webpack-plugin, webpack-dev-serverconst path = require('node:path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
devtool: 'eval-source-map',
entry: './src/index.ts',
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js',
clean: true,
},
resolve: {
extensions: [".ts", ".tsx", ".js"],
},
module: {
rules: [
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: "ts-loader",
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
{
test: /\.(png|jpe?g|gif|svg|webp|woff2?)$/,
type: "asset/resource",
},
],
},
plugins: [
new HtmlWebpackPlugin({ template: './public/index.html' }),
],
devServer: {
hot: true,
},
};
What this tool does
- Inherited a project with just a src folder? Tick the file types you use and get a complete, runnable module.rules array.
- Migrating from webpack 4 to 5: compare the generated config — static assets move to asset/resource and the proxy switches to the array form.
- Debugging a split frontend/backend setup: forward /api to your local backend and enable historyApiFallback so client-side routes stop 404ing on refresh.
- Teaching or writing docs? Toggle a loader on and off to show exactly how rules and plugins change.
Example
Input
Mode development, entry ./src/index.ts, output dist, TypeScript / CSS / static assets / HtmlWebpackPlugin / HMR ticked
Output
const path = require('node:path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
devtool: 'eval-source-map',
entry: './src/index.ts',
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js',
clean: true,
},
resolve: {
extensions: [".ts", ".tsx", ".js"],
},
module: {
rules: [
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: "ts-loader",
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
{
test: /\.(png|jpe?g|gif|svg|webp|woff2?)$/,
type: "asset/resource",
},
],
},
plugins: [
new HtmlWebpackPlugin({ template: './public/index.html' }),
],
devServer: {
hot: true,
},
};Switch to production and the filename becomes [name].[contenthash].js while devtool turns off. Entry paths are only checked for shape, so ./src/main.js does not have to exist.
Frequently asked questions
Why does CSS extraction require CSS or Sass to be enabled?
MiniCssExtractPlugin only replaces style-loader inside a style rule, so with no style rule it extracts nothing and the generated config carries a plugin that never runs. The tool blocks that combination instead of leaving you with a silent no-op.
How does asset/resource differ from url-loader or file-loader?
asset/resource is webpack 5’s built-in resource module type and behaves like file-loader; asset/inline is the url-loader equivalent, and asset picks between them by size threshold. On webpack 5 you no longer need file-loader or url-loader at all.
Why is devServer.proxy an array?
webpack-dev-server 5 changed proxy to an array where each entry lists the matched prefixes in context; the old `{ "/api": { target } }` object form is deprecated. The generated config uses the new shape so it can replace the old one directly.
Can I run npm start with this config right away?
The config itself is syntactically complete, but your entry file, the public/index.html template and every dependency listed in the result panel must exist first, and you still add the script yourself (for example "start": "webpack serve"). The tool writes no files and does not guess your layout.
Is this a webpack best practice preset?
It is a conservative, readable baseline: contenthash and no source maps in production, HMR and eval-source-map in development. Real projects usually add cache groups, code splitting and CSS minification on top, so treat it as a starting point.
Keywords：webpackwebpack configwebpack.config.jswebpack 配置loaderdevServer打包配置html-webpack-plugin前端工程化webpack 生成器