Untitled

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
const { HotModuleReplacementPlugin } = require('webpack');

module.exports = (env, argv) => {
  const isDevelopment = argv.mode === 'development';

  return {
    entry: './src/index.js', // Your React Native Web entry file
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'bundle.js',
    },
    resolve: {
      alias: {
        'react-native$': 'react-native-web', // Use react-native-web instead of react-native
      },
      extensions: ['.web.js', '.js'], // Use .web.js for web-specific files
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env', '@babel/preset-react'],
              plugins: [
                isDevelopment && require.resolve('react-refresh/babel'),
              ].filter(Boolean),
            },
          },
        },
        // Add more rules for handling CSS, images, etc. as needed
      ],
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: './public/index.html', // Your HTML template
      }),
      isDevelopment && new ReactRefreshWebpackPlugin(),
      isDevelopment && new HotModuleReplacementPlugin(),
    ].filter(Boolean),
    devServer: {
      hot: true,
    },
    devtool: isDevelopment ? 'source-map' : 'none',
  };
};