webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');


module.exports = {

   mode: 'development',
   entry: {
      main: './src/pages/index.js'
   },

   output: {
      filename: 'main.js',
      publicPath: '',
      path: path.resolve(__dirname, 'dist')
   },

   devServer: {
      static: path.resolve(__dirname, 'dist'),
      open: true,
      compress: true,
      port: 8080
   },

   module: {
      rules: [
         {
            test: /\.js$/,
            use: 'babel-loader',
            exclude: /node_modules/
         },

         {
            test: /\.(woff|woff2|eot|ttf|otf)$/i,
            type: 'asset/resource',
            generator: {
               filename: 'fonts/[name].[hash][ext]',
            }
         },

         {
            test: /\.(png|svg|jpg|jpeg|gif)$/,
            type: 'asset/resource',
            generator: {
               filename: 'image/[name].[hash][ext]',
            }
         },

         {
            test: /\.css$/,
            use: [
               MiniCssExtractPlugin.loader,
               {
                  loader: 'css-loader',
                  options: {
                     importLoaders: 1
                  }
               },
               'postcss-loader'
            ]
         }
      ]
   },



   plugins: [
      new HtmlWebpackPlugin({
         template: './src/index.html'
      }),
      new CleanWebpackPlugin(),
      new MiniCssExtractPlugin(),
   ]
}