Webpack Guide

First, install Webpack and webpack-cli:

yarn add -D webpack webpack-cli

Then install the Hanzo GUI plugin:

yarn add -D gui-loader

Configuration

Add the plugin to your webpack.config.js. If you have a gui.build.ts (recommended — see compiler install docs), no options are needed:

const { GuiPlugin } = require('gui-loader')

// reads from gui.build.ts automatically
config.plugins.push(new GuiPlugin())

Or pass options inline:

const { GuiPlugin } = require('gui-loader')

config.plugins.push(
  new GuiPlugin({
    config: './src/gui.config.ts',
    components: ['@hanzo/gui'],
  })
)

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 the server locally, install webpack-dev-server:

yarn add -D webpack-dev-server

Start the server with:

yarn run webpack serve

Configuration

Usage

On this page