// 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");

// Define webpack configuration
module.exports = {
  // Entry points for the library
  entry: {
    'App': './src/index.tsx',
    'App.min': './src/index.tsx'
  },
  // Output configuration
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
    library: '@yugensys/react-widets',
    libraryTarget: 'umd', // Universal Module Definition
    umdNamedDefine: true
  },
  // Optimization settings
  optimization: {
    minimize: true
  },
  // Source map generation for debugging
  devtool: 'source-map',
  // Resolve module file extensions
  resolve: {
    extensions: ['.tsx', '.ts', '.js', '.scss', '.css'],
    modules: ['node_modules']
  },
  // Define module rules for file handling
  module: {
    rules: [
      // TypeScript files handling
      {
        test: /\.(ts|tsx)$/,
        use: 'ts-loader',
      },
      // CSS and SCSS files handling
      {
        test: /\.(css|scss)$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',                // Convert CSS into CommonJS
          'sass-loader'                // Compile Sass to CSS
        ]
      },
      // File loader for other assets
      {
        test: /\.(png|svg|jpg|jpeg|gif|json|ico)$/,
        use: ['file-loader?name=[name].[ext]']
      }
    ],
  },
  // Define webpack plugins
  plugins: [
    new CleanWebpackPlugin(),             // Clean output directory
    new HtmlWebpackPlugin({               // Generate HTML file
      template: './public/index.html',
    }),
    new MiniCssExtractPlugin({            // Extract CSS into separate files
      filename: '[name].css',
    }),
  ],
  // Configuration for webpack-dev-server
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist'),
    },
    compress: true,
    port: 9000,
    open: true,
  },
};

Congratulations! You’ve gained a deeper understanding of the compilation process involved in bundling a React library into a component library. By dissecting the configuration files and exploring real examples, you’re now equipped to streamline the development and distribution of your React libraries. Armed with this knowledge, you can foster collaboration and code reuse within the community, making a significant impact in the world of web development. Happy coding!