micimize/fonts.js

## fonts.js
/* in ./index.web.tsx:
import injectFonts from './web/fonts'
injectFonts()
*/
import FontAwesome from 'react-native-vector-icons/Fonts/FontAwesome.ttf';
import Ionicons from 'react-native-vector-icons/Fonts/Ionicons.ttf';
import Roboto from 'native-base/Fonts/Roboto.ttf';
import Roboto_medium from 'native-base/Fonts/Roboto_medium.ttf';

function font(family, url){
  return `@font-face {
    src: url(${url});
    font-family: ${family};
  }`
}
function fonts(fontObj){
  return Object.entries(fontObj)
    .reduce((faces, [family, url]) => `${faces}\n${font(family, url)}`,'')
}

function injectFonts (){
  const iconFontStyles = fonts({ FontAwesome, Ionicons, Roboto, Roboto_medium })
  // Create stylesheet
  const style = document.createElement('style');
  style.type = 'text/css';
  if (style.styleSheet) {
    style.styleSheet.cssText = iconFontStyles;
  } else {
    style.appendChild(document.createTextNode(iconFontStyles));
  }

  // Inject stylesheet
  document.head.appendChild(style);
}

export default injectFonts

## index.ejs
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

## webpack.config.js
// "web": "webpack-dev-server -d --config web/webpack.config.js --inline --colors"
var webpack = require("webpack");
var path = require("path");
var fs = require("fs");
var HtmlWebpackPlugin = require('html-webpack-plugin');

function nodeModule(mod){
  return path.resolve(__dirname, '../node_modules/' + mod)
}

module.exports = {

  entry: [
    'react-hot-loader/patch',
    path.join(__dirname, '../index.web.tsx')
  ],

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

  // Enable sourcemaps for debugging webpack's output.
  devtool: "source-map",

  resolve: {
    symlinks: false,
    extensions: [ ".js", ".jsx", ".ts", ".tsx", ".web.js", ".web.jsx" ],
    alias: {
      'react-native$': 'react-native-web',
      'react-router-native': 'react-router',
      'react-native/Libraries/Renderer/shims/ReactNativePropRegistry': 'react-native-web/dist/modules/ReactNativePropRegistry/index.js',
      'react-native-vector-icons/Fonts': nodeModule('react-native-vector-icons/Fonts'), // need to avoid aliasing Font dir
      'react-native-vector-icons': 'react-native-vector-icons/dist',
    },
  },

  plugins: [
    new webpack.ProvidePlugin({
      'regeneratorRuntime': 'regenerator-runtime/runtime'
    }),
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
      title: 'react native',
      chunksSortMode: 'dependency',
      template: path.resolve(__dirname, './index.ejs')
    }),
  ],

  module: {
    rules: [
      {
        test: /.jsx?|\.tsx?$/,
        // Add every directory that needs to be compiled by Babel during the build
        include: [
          path.join(__dirname, '../index.web.tsx'),
          path.resolve(__dirname, '../src'),
          nodeModule('react-native-uncompiled'),
          nodeModule('react-native-web-lists'),
          nodeModule('native-base'),
          nodeModule('react-native-easy-grid'),
          nodeModule('react-native-drawer'),
        ],

        use: [
          'react-hot-loader/webpack',
          {
            // awesome-typescript-loader wraps babel, so I believe unwrapping babelOptions and using the normal babel-loader will work
            loader: 'awesome-typescript-loader',
            options: {
              useWebpackText: true,
              useTranspileModule: true,
              doTypeCheck: true,
              forkChecker: true,

              useBabel: true, useCache: true,
              babelOptions: {
                babelrc: false,
                // This aliases 'react-native' to 'react-native-web' and includes only
                // the modules needed by the app
                plugins: ['react-native-web/babel', 'transform-regenerator'],
                // The 'react-native' preset is recommended (or use your own .babelrc)
                presets : [ 'react-native' ],
              }
            }
          }
        ]
      },
      // This is needed for webpack to import static images in JavaScript files
      {
        test: /\.(gif|jpe?g|png|svg)$/,
        use: {
          loader: 'url-loader',
          options: {
            name: '[name].[ext]'
          }
        }
      },
      {
        test: /\.ttf$/,
        loader: "url-loader", // or directly file-loader
        include: [
          nodeModule('react-native-vector-icons'),
          nodeModule('native-base/Fonts'),
        ]
      },
    ]
  },

  devServer: {
    hot: true,
    historyApiFallback: true
  }

};
	/* in ./index.web.tsx:
	import injectFonts from './web/fonts'
	injectFonts()
	*/
	import FontAwesome from 'react-native-vector-icons/Fonts/FontAwesome.ttf';
	import Ionicons from 'react-native-vector-icons/Fonts/Ionicons.ttf';
	import Roboto from 'native-base/Fonts/Roboto.ttf';
	import Roboto_medium from 'native-base/Fonts/Roboto_medium.ttf';

	function font(family, url){
	return `@font-face {
	src: url(${url});
	font-family: ${family};
	}`
	}
	function fonts(fontObj){
	return Object.entries(fontObj)
	.reduce((faces, [family, url]) => `${faces}\n${font(family, url)}`,'')
	}

	function injectFonts (){
	const iconFontStyles = fonts({ FontAwesome, Ionicons, Roboto, Roboto_medium })
	// Create stylesheet
	const style = document.createElement('style');
	style.type = 'text/css';
	if (style.styleSheet) {
	style.styleSheet.cssText = iconFontStyles;
	} else {
	style.appendChild(document.createTextNode(iconFontStyles));
	}

	// Inject stylesheet
	document.head.appendChild(style);
	}

	export default injectFonts
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title><%= htmlWebpackPlugin.options.title %></title>
	</head>
	<body>
	<div id="root"></div>
	</body>
	</html>
	// "web": "webpack-dev-server -d --config web/webpack.config.js --inline --colors"
	var webpack = require("webpack");
	var path = require("path");
	var fs = require("fs");
	var HtmlWebpackPlugin = require('html-webpack-plugin');

	function nodeModule(mod){
	return path.resolve(__dirname, '../node_modules/' + mod)
	}

	module.exports = {

	entry: [
	'react-hot-loader/patch',
	path.join(__dirname, '../index.web.tsx')
	],

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

	// Enable sourcemaps for debugging webpack's output.
	devtool: "source-map",

	resolve: {
	symlinks: false,
	extensions: [ ".js", ".jsx", ".ts", ".tsx", ".web.js", ".web.jsx" ],
	alias: {
	'react-native$': 'react-native-web',
	'react-router-native': 'react-router',
	'react-native/Libraries/Renderer/shims/ReactNativePropRegistry': 'react-native-web/dist/modules/ReactNativePropRegistry/index.js',
	'react-native-vector-icons/Fonts': nodeModule('react-native-vector-icons/Fonts'), // need to avoid aliasing Font dir
	'react-native-vector-icons': 'react-native-vector-icons/dist',
	},
	},

	plugins: [
	new webpack.ProvidePlugin({
	'regeneratorRuntime': 'regenerator-runtime/runtime'
	}),
	new webpack.NamedModulesPlugin(),
	new webpack.HotModuleReplacementPlugin(),
	new HtmlWebpackPlugin({
	title: 'react native',
	chunksSortMode: 'dependency',
	template: path.resolve(__dirname, './index.ejs')
	}),
	],

	module: {
	rules: [
	{
	test: /.jsx?\|\.tsx?$/,
	// Add every directory that needs to be compiled by Babel during the build
	include: [
	path.join(__dirname, '../index.web.tsx'),
	path.resolve(__dirname, '../src'),
	nodeModule('react-native-uncompiled'),
	nodeModule('react-native-web-lists'),
	nodeModule('native-base'),
	nodeModule('react-native-easy-grid'),
	nodeModule('react-native-drawer'),
	],

	use: [
	'react-hot-loader/webpack',
	{
	// awesome-typescript-loader wraps babel, so I believe unwrapping babelOptions and using the normal babel-loader will work
	loader: 'awesome-typescript-loader',
	options: {
	useWebpackText: true,
	useTranspileModule: true,
	doTypeCheck: true,
	forkChecker: true,

	useBabel: true, useCache: true,
	babelOptions: {
	babelrc: false,
	// This aliases 'react-native' to 'react-native-web' and includes only
	// the modules needed by the app
	plugins: ['react-native-web/babel', 'transform-regenerator'],
	// The 'react-native' preset is recommended (or use your own .babelrc)
	presets : [ 'react-native' ],
	}
	}
	}
	]
	},
	// This is needed for webpack to import static images in JavaScript files
	{
	test: /\.(gif\|jpe?g\|png\|svg)$/,
	use: {
	loader: 'url-loader',
	options: {
	name: '[name].[ext]'
	}
	}
	},
	{
	test: /\.ttf$/,
	loader: "url-loader", // or directly file-loader
	include: [
	nodeModule('react-native-vector-icons'),
	nodeModule('native-base/Fonts'),
	]
	},
	]
	},

	devServer: {
	hot: true,
	historyApiFallback: true
	}

	};