feat(example): web

2026-05-24 07:20:11 +00:00 · 2026-03-25 15:51:34 +01:00
parent 8e8b089ddb
commit 8f7eeea5bf
5 changed files with 125 additions and 2 deletions
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>React Native Video - Example</title>
+  <style>
+    html, body { height: 100%; margin: 0; padding: 0; }
+    body { overflow: hidden; }
+    #root { display: flex; height: 100%; }
+  </style>
+</head>
+<body>
+  <div id="root"></div>
+</body>
+</html>
@@ -0,0 +1,85 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+const appDirectory = path.resolve(__dirname, '../');
+const rootDirectory = path.resolve(__dirname, '../../');
+
+const babelLoaderConfiguration = {
+  test: /\.(js|jsx|ts|tsx)$/,
+  include: [
+    path.resolve(appDirectory, 'index.web.js'),
+    path.resolve(appDirectory, 'src'),
+    // Monorepo packages that need transpiling
+    path.resolve(rootDirectory, 'packages/react-native-video/src'),
+  ],
+  use: {
+    loader: 'babel-loader',
+    options: {
+      cacheDirectory: true,
+      presets: [
+        '@babel/preset-env',
+        ['@babel/preset-react', { runtime: 'automatic' }],
+        '@babel/preset-typescript',
+      ],
+      plugins: ['react-native-web'],
+    },
+  },
+};
+
+const imageLoaderConfiguration = {
+  test: /\.(gif|jpe?g|png|svg)$/,
+  use: {
+    loader: 'url-loader',
+    options: { name: '[name].[ext]' },
+  },
+};
+
+const cssLoaderConfiguration = {
+  test: /\.css$/,
+  use: ['style-loader', 'css-loader'],
+};
+
+module.exports = {
+  entry: path.resolve(appDirectory, 'index.web.js'),
+  output: {
+    filename: 'bundle.web.js',
+    path: path.resolve(appDirectory, 'dist'),
+  },
+  module: {
+    rules: [
+      babelLoaderConfiguration,
+      imageLoaderConfiguration,
+      cssLoaderConfiguration,
+    ],
+  },
+  resolve: {
+    alias: {
+      'react-native$': 'react-native-web',
+      // Native-only modules that should not be bundled on web
+      'react-native-nitro-modules': false,
+      '@react-native-video/drm': false,
+      // Resolve react-native-video from source (not lib/) for web
+      'react-native-video': path.resolve(rootDirectory, 'packages/react-native-video/src'),
+    },
+    extensions: [
+      '.web.tsx', '.web.ts', '.web.js',
+      '.tsx', '.ts', '.js', '.jsx', '.json',
+    ],
+    // Monorepo: resolve packages from both example and root node_modules
+    modules: [
+      path.resolve(appDirectory, 'node_modules'),
+      path.resolve(rootDirectory, 'node_modules'),
+      'node_modules',
+    ],
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: path.resolve(appDirectory, 'web/index.html'),
+    }),
+  ],
+  devServer: {
+    static: path.resolve(appDirectory, 'dist'),
+    hot: true,
+    port: 8080,
+  },
+};