So I've followed a number of tutorials on how to set up an existing React Native project for web, and eventually hacked my way into getting it to run.

My new issue is, it takes AGES to recompile when I make any change (i.e ~35 seconds). I'm positive I've gotten something extremely wrong here, but does anyone see anything obvious I've missed? Is it all the includes?

Failing that, is there any means of knowing which part of webpack's config is taking the longest?

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin')

const appDirectory = path.resolve(__dirname, '../');

const babelLoaderConfiguration = {
  test: /\.js?$/,
  // Add every directory that needs to be compiled by Babel during the build.
  include: [
    path.resolve(appDirectory, 'index.web.js'),
    path.resolve(appDirectory, 'src'),
    path.resolve(appDirectory, 'node_modules/react-native-uncompiled'),
    path.resolve(appDirectory, 'node_modules/react-native-credit-card-input'),
    path.resolve(appDirectory, 'node_modules/react-native-draggable-view'),
    path.resolve(appDirectory, 'node_modules/react-native-inset-shadow'),
    path.resolve(appDirectory, 'node_modules/react-native-linear-gradient'),
    path.resolve(appDirectory, 'node_modules/react-native-snap-carousel'),
    path.resolve(appDirectory, 'node_modules/react-native-vector-icons'),
    path.resolve(appDirectory, 'node_modules/react-native-bluetooth-state-manager'),
    path.resolve(appDirectory, 'node_modules/react-native-confetti-cannon'),
    path.resolve(appDirectory, 'node_modules/react-native-flip-card'),
    path.resolve(appDirectory, 'node_modules/react-native-spinkit'),
    path.resolve(appDirectory, 'node_modules/react-native-webview'),
    path.resolve(appDirectory, 'node_modules/react-native'),
  ],
  use: {
    loader: 'babel-loader',
    options: {
      presets: [
        'module:metro-react-native-babel-preset',
        ['@babel/preset-env', {
          "loose": true
        }],
        '@babel/preset-react',
      ],
      plugins: ['react-native-web'],
    },
  },
};

const imageLoaderConfiguration = {
  test: /\.(gif|jpe?g|png|svg|ttf)$/,
  use: {
    loader: 'file-loader',
    options: {
      name: '[name].[ext]',
      esModule: false,
    },
  },
};

module.exports = {
  entry: [
    path.resolve(appDirectory, 'index.web.js'),
  ],
  output: {
    filename: 'bundle.[chunkhash].web.js',
    path: path.resolve(appDirectory, 'dist'),
    publicPath: '/'
  },
  devServer: {
    port: 9000
  },
  module: {
    rules: [
      babelLoaderConfiguration,
      imageLoaderConfiguration,
      {
        test: /\.ttf$/,
        loader: "file-loader", // or directly file-loader
        include: path.resolve(__dirname, "node_modules/react-native-vector-icons"),
      },
      {
        test: /\.(sa|sc|c)ss$/,
        use: ["style-loader", "css-loader", "sass-loader"]
      },
      {
        test: /postMock.html$/,
        use: {
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
          },
        },
      }
    ],
  },
  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.js', '.js', '.jsx', '.web.jsx'],
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: './index.html',
      template: './index.template.html'
    })
  ]
};