Webpack Config Generator

Webpack does nothing useful until a webpack.config.js exists, and the official docs open with concepts when all you wanted was a skeleton to adapt. The predictable outcome: you copy a snippet from a 2019 blog post, it uses an option that was renamed in version 5, and the build dies with a message that points nowhere useful.

What comes out is the functional minimum: entry at src/index.js, output to dist/bundle.js built with path.resolve, mode production and two loader rules. One sends .js files outside node_modules through babel-loader, the other runs .css through css-loader and style-loader. That pair is applied right to left, and swapping the order breaks the build. There are no fields to edit; the button always returns the same text.

Before running it, install webpack, webpack-cli, babel-loader with @babel/core and @babel/preset-env, plus style-loader and css-loader, and add a babel.config.js. Production mode already enables minification and tree shaking; for local work switch to development and add devtool source-map. Missing here are devServer and HtmlWebpackPlugin, which most real projects end up wanting. Generation runs in the browser.