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',
};
};