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

Previous

Vite

Next

Metro