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.

TB

ToolBird Assistant

Find the right tool instantly

Hey! I'm ToolBird Assistant. Tell me what you need and I'll find the right tool for you.