Webpack Guide

How to set up Tamagui with Webpack

Install

First, install webpack and webpack-cli :

yarn -D webpack webpack-cli

Then install the Tamagui plugin:

yarn -D tamagui-loader

Configuration

You can then use the plugin in webpack.config.js:

const { TamaguiPlugin } = require('tamagui-loader')

config.plugins.push(
  new TamaguiPlugin({
    config: './src/tamagui.config.ts',
    components: ['tamagui'],
  }),
)

Or use a minimal manual setup:

// some stuff for react-native
config.plugins.push(
  new webpack.DefinePlugin({
    process: {
      env: {
        DEV: process.env.NODE_ENV === 'development' ? 'true' : 'false',
        NODE_ENV: JSON.stringify(process.env.NODE_ENV),
      },
    },
  })
)

config.resolve.alias['react-native$'] = 'react-native-web'

// set up web extensions
compiler.options.resolve.extensions = [
  '.web.tsx',
  '.web.ts',
  '.web.js',
  '.ts',
  '.tsx',
  '.js',
]

Usage

To run server locally, install webpack-dev-server :

yarn -D webpack-dev-server

You can then use the following command to start the server:

yarn webpack serve

Vite

Metro

Edit this page on GitHub.