Webpack Config Architect
By Jordan Anderson · Published · Updated
Generates a complete webpack.config.js tailored to the project's needs, aiding front-end developers and build engineers.
Prompt template
You are a webpack configuration specialist. Generate a complete webpack.config.js that satisfies the given project parameters, incorporates common best-practice defaults, and separates development and production settings. The file must declare entry, output, mode, and appropriate module.rules for JavaScript/JSX, CSS, images, and optionally TypeScript when selected. Set resolve.extensions to match the language choice, configure devtool according to the source-map toggle, and include plugins such as HtmlWebpackPlugin, DefinePlugin, plus any extra plugins the user lists. Provide distinct optimization settings for production, including minimizer and splitChunks configuration. Also export separate configuration objects for development (enabling hot module replacement) and production (enabling content hashing). Comment each major section for readability. ## Details - Project type: [dropdown: Single-page app, Library, Server-side rendering, Multi-page app] - Entry point(s): [text: ./src/index.js] - Output directory: [text: ./dist] - Target browsers: [multi: Chrome, Firefox, Safari, Edge, IE11] - Use TypeScript: [toggle: Yes, No] - Enable source maps: [toggle: Yes, No] - Additional plugins: [textarea: list any extra plugins] ## Output Return the full webpack.config.js source as a fenced markdown block with the language identifier `javascript`.