Build webpack.config.js visually with loaders, plugins, optimization, and dev server settings.
You check off entry/output settings, loaders (babel-loader, css-loader, sass-loader, asset modules), plugins (HtmlWebpackPlugin, MiniCssExtractPlugin, DefinePlugin), optimization flags, and devServer options in a form, and the tool assembles them into a formatted webpack.config.js you can copy out. The part people miss: it writes the require() calls and constructor entries for every loader and plugin you enable, but it never installs those npm packages for you - the file will throw 'Cannot find module' until you run npm install for each one yourself.
A concrete input and expected output from the current implementation.
Input
entry: ./src/index.js; output: bundle.js to dist/; mode: development; loader: Babel for .js/.jsx; plugin: HtmlWebpackPlugin with template ./src/index.html; devServer port: 3000
Expected output
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: 'babel-loader',
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
}),
],
devServer: {
port: 3000,
},
}; Each selected form field maps to one config field: the loader entry becomes a module.rules object with the right test regex, the plugin entry becomes a require plus a new Plugin(...) call using the template path you supplied, and the dev server port becomes devServer.port.
Each section of the form corresponds to one top-level key of the exported config object. Toggling a loader adds an entry to module.rules with a test regex, an exclude pattern, and a use array built in the order you added loaders for that file type, so the generated chain reflects your selections rather than a fixed template.
Enabling a plugin like MiniCssExtractPlugin or HtmlWebpackPlugin inserts both the require() statement at the top of the file and a matching new Plugin({...}) entry in the plugins array, with any option fields you filled in (template path, filename pattern, defined globals) interpolated directly into the constructor call.
No. It only writes the require() statements and configuration entries into webpack.config.js. You still need to run npm install for each named package, such as babel-loader, css-loader, or mini-css-extract-plugin, before building.
Not guaranteed. Some defaults, like asset modules replacing file-loader/url-loader, are webpack 5 conventions. Check your installed webpack version first and swap in the older loader-based syntax if you're still on webpack 4.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.