Webpack Config Generator
Generate Webpack configuration files. Configure loaders, plugins, dev server, and build settings.
38.3Kuses
7.9/10(444)
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'production',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[contenthash].js',
clean: true,
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(png|svg|jpg|jpeg|gif|webp)$/i,
type: 'asset/resource',
}
],
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
})
],
devServer: {
port: 3000,
hot: true,
open: true,
},
};Supported Loaders
- TypeScript (ts-loader)
- Babel (babel-loader)
- CSS and Sass
- Image assets
⚡ Pro OptionsSponsored
Some links on this page are affiliate links. If you click and make a purchase, we may earn a commission at no extra cost to you.
Disclaimer: This tool is provided as-is for informational and educational purposes only.