webpack config for RN Web

webpack.config.babel.js

//import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'; if you want to analyze size
const path = require('path');
const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const isDev = process.env.NODE_ENV !== 'production';

const everythingExceptNodeModulesLoader = {
  test: /\.js$/,
  exclude: /node_modules/,
  use: {
    loader: 'babel-loader',
    options: {
      cacheDirectory: !isDev,
      presets: ['react-native'],
      plugins: [
        [
          'module-resolver',
          {
            root: ['./'],
            alias: {
              'bamApp': './',
            },
          },
        ],
        [
          'transform-runtime',
          {
            helpers: false,
            polyfill: false,
          },
        ],
      ],
    },
  },
};

const modulesLoader = {
  test: /\.js$/,
  include: [
    /node_modules\/react-native-/,
    /node_modules\/react-navigation/,
  ],
  use: {
    loader: 'babel-loader',
    options: {
      cacheDirectory: !isDev,
      presets: ['react-native'],
    },
  },
};

// This is needed for webpack to import static images in JavaScript files
const imageLoaderConfiguration = {
  test: /\.(gif|jpe?g|png|svg)$/,
  loaders: [
    {
      loader: 'file-loader',
      options: {
        outputPath: 'assets/',
      },
    },
    'image-webpack-loader',
  ],
};

const fontLoaderConfiguration = {
  test: /\.ttf$/,
  loader: 'file-loader',
  options: {
    outputPath: 'assets/',
  },
  include: [/node_modules\/react-native-vector-icons/, path.join(__dirname, '../resources')],
};

module.exports = {
  devServer: {
    contentBase: path.join(__dirname, 'src'),
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
      'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization',
    },
    proxy: {
      '/bam': {
        target: 'https://api.bam.tech/',
        changeOrigin: true,
        pathRewrite: {
          '^/bam': '',
        },
      },
    },
  },

  entry: [path.join(__dirname, '../index.web.js')],

  output: {
    path: path.join(__dirname, '../dist/web'),
    filename: 'bundle.js',
  },

  module: {
    rules: [everythingExceptNodeModulesLoader, modulesLoader, imageLoaderConfiguration, fontLoaderConfiguration],
  },

  plugins: [
    // `process.env.NODE_ENV === 'production'` must be `true` for production
    // builds to eliminate development checks and reduce build size.
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
      __DEV__: JSON.stringify(isDev),
    }),
    new CopyWebpackPlugin([{ from: 'web/src/assets/', to: 'assets/' }]),
    //new BundleAnalyzerPlugin(), if you want to analyze size
  ],

  resolve: {
    // Maps the 'react-native' import to 'react-native-web' and the stubs or mocks.
    alias: {
      'react-native': 'react-native-web',
      'react-navigation': 'react-navigation/lib/react-navigation.js',
    },
    // If you're working on a multi-platform React Native app, web-specific
    // module implementations should be written in files using the extension
    // `.web.js`.
    extensions: ['.web.js', '.js'],
  },
};