const path = require ( 'path' ) ; const webpack = require ( 'webpack' ) ; const HtmlWebpackPlugin = require ( 'html-webpack-plugin' ) ; const appDirectory = path . resolve ( __dirname ) ; const rootDirectory = path . resolve ( __dirname , '..' , '..' ) ; const compileNodeModules = [ 'react-native-swipe-gestures' , 'react-native-modal-selector' ] . map ( ( moduleName ) => path . resolve ( rootDirectory , `node_modules/${ moduleName }` ) ) ; const babelLoaderConfiguration = { test : /\.js$|tsx?$/ , include : [ path . resolve ( __dirname , 'index.web.js' ) , path . resolve ( __dirname , 'App.web.tsx' ) , path . resolve ( __dirname , 'components' ) , path . resolve ( __dirname , 'other_components' ) , path . resolve ( __dirname , './.storybook/preview.js' ) , ... compileNodeModules , ] , use : { loader : 'babel-loader' , options : { cacheDirectory : true , presets : [ '@babel/env' , '@babel/preset-react' , 'module:metro-react-native-babel-preset' ] , plugins : [ 'react-native-web' , '@babel/plugin-proposal-class-properties' ] , } , } , } ; const svgLoaderConfiguration = { test : /\.svg$/ , use : [ { loader : '@svgr/webpack' , } , ] , } ; const imageLoaderConfiguration = { test : /\.(gif|jpe?g|png)$/ , use : { loader : 'url-loader' , options : { name : '[name].[ext]' , } , } , } ; module . exports = { entry : { app : path . join ( __dirname , 'index.web.js' ) , } , output : { path : path . resolve ( appDirectory , 'dist' ) , publicPath : '/' , filename : 'rnw.bundle.js' , } , resolve : { extensions : [ '.web.tsx' , '.web.ts' , '.tsx' , '.ts' , '.web.js' , '.js' ] , alias : { 'react-native$' : 'react-native-web' , } , } , module : { rules : [ babelLoaderConfiguration , imageLoaderConfiguration , svgLoaderConfiguration ] , } , plugins : [ new HtmlWebpackPlugin ( { template : path . join ( __dirname , 'index.html' ) , } ) , new webpack . HotModuleReplacementPlugin ( ) , new webpack . DefinePlugin ( { __DEV__ : JSON . stringify ( true ) , } ) , ] , devServer : { open : true , } , } ;