diff --git a/index.web.js b/index.web.js index f443dbb6d2..4ceb656fb4 100644 --- a/index.web.js +++ b/index.web.js @@ -1,14 +1,4 @@ -// index.web.js - import 'platform/polyfills' -import {AppRegistry} from 'react-native' +import {registerRootComponent} from 'expo' import App from './src/App' -import {name as appName} from './src/app.json' - -// register the app -AppRegistry.registerComponent(appName, () => App) - -AppRegistry.runApplication(appName, { - initialProps: {}, - rootTag: document.getElementById('app-root'), -}) +registerRootComponent(App) diff --git a/web/webpack.config.js b/web/webpack.config.js deleted file mode 100644 index d74cdd5422..0000000000 --- a/web/webpack.config.js +++ /dev/null @@ -1,121 +0,0 @@ -const path = require('path') -const HtmlWebpackPlugin = require('html-webpack-plugin') -const webpackEnv = process.env.NODE_ENV || 'development' - -const appDirectory = path.resolve(__dirname, '../') - -// NOTE: node modules that ship as typescript must be listed here -const uncompiled_deps = [ - '@bam.tech/react-native-image-resizer', - 'react-native-fs', - 'rn-fetch-blob', - 'react-native-root-siblings', - 'react-native-linear-gradient', -] - -const babelLoaderConfiguration = { - test: /\.(js|jsx|ts|tsx)$/, - include: [ - path.resolve(appDirectory, 'index.web.js'), - path.resolve(appDirectory, 'src'), - ...uncompiled_deps.map(dep => - path.resolve(appDirectory, `node_modules/${dep}`), - ), - ], - use: { - loader: 'babel-loader', - options: { - cacheDirectory: true, - presets: ['module:metro-react-native-babel-preset'], - plugins: ['react-native-web'], - }, - }, -} - -const imageLoaderConfiguration = { - test: /\.(gif|jpe?g|png|svg)$/, - use: { - loader: 'url-loader', - options: { - name: '[name].[ext]', - esModule: false, - }, - }, -} - -const reactNativeWebWebviewConfiguration = { - test: /postMock.html$/, - use: { - loader: 'file-loader', - options: { - name: '[name].[ext]', - }, - }, -} - -module.exports = { - mode: webpackEnv, - - entry: [ - // NOTE: load any web API polyfills needed here - path.resolve(appDirectory, 'index.web.js'), - ], - - output: { - filename: 'bundle.web.js', - path: path.resolve(appDirectory, 'dist'), - }, - - plugins: [ - new HtmlWebpackPlugin({ - template: path.join(appDirectory, './public/index.html'), - }), - ], - - module: { - rules: [ - babelLoaderConfiguration, - imageLoaderConfiguration, - reactNativeWebWebviewConfiguration, - ], - }, - - devServer: { - historyApiFallback: { - rewrites: [ - {from: /.*\/bundle.web.js/, to: '/bundle.web.js'}, - { - from: /.*^\/(.*.hot-update.json)$/, - to: function (context) { - return '/' + context.parsedUrl.pathname.split('/').pop() - }, - }, - { - from: /.*^\/(.*.hot-update.js)$/, - to: function (context) { - return '/' + context.parsedUrl.pathname.split('/').pop() - }, - }, - {from: /.*/, to: '/index.html'}, - ], - }, - }, - - resolve: { - alias: { - 'react-native$': 'react-native-web', - 'react-native-linear-gradient': 'react-native-web-linear-gradient', - 'react-native-webview': 'react-native-web-webview', - }, - extensions: [ - '.web.tsx', - '.web.ts', - '.tsx', - '.ts', - '.web.jsx', - '.web.js', - '.jsx', - '.js', - ], - }, -} diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000000..28e5ca0db2 --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,26 @@ +const createExpoWebpackConfigAsync = require('@expo/webpack-config') +const {withAlias} = require('@expo/webpack-config/addons') + +const reactNativeWebWebviewConfiguration = { + test: /postMock.html$/, + use: { + loader: 'file-loader', + options: { + name: '[name].[ext]', + }, + }, +} + +module.exports = async function (env, argv) { + let config = await createExpoWebpackConfigAsync(env, argv) + config = withAlias(config, { + 'react-native$': 'react-native-web', + 'react-native-linear-gradient': 'react-native-web-linear-gradient', + 'react-native-webview': 'react-native-web-webview', + }) + config.module.rules = [ + ...(config.module.rules || []), + reactNativeWebWebviewConfiguration, + ] + return config +}