Fusebox config example

fuse.ts

import {
  FuseBox,
  BabelPlugin,
  QuantumPlugin,
  WebIndexPlugin,
  TypeScriptHelpers,
  Sparky,
} from 'fuse-box'

import * as path from 'path'
import * as express from 'express'
import * as history from 'connect-history-api-fallback'
import { Bundle } from 'fuse-box/dist/typings/core/Bundle'

const ENV = process.env.NODE_ENV || 'development'
const IS_PROD = ENV === 'production'

const SRC = 'src'
const PUBLIC = 'public'
const BUILD = 'dist'

let fuse: FuseBox
let app: Bundle
let vendor: Bundle

Sparky.task('config', () => {
  fuse = new FuseBox({
    homeDir: `${SRC}/`,
    cache: IS_PROD,
    hash: IS_PROD,
    sourceMaps: !IS_PROD,
    target: 'browser',
    output: path.join(BUILD, 'static/$name.js'),
    useTypescriptCompiler: true,
    experimentalFeatures: true,
    useJsNext: ['history', 'invariant', 'warning'],
    polyfillNonStandardDefaultUsage: ['history', 'invariant', 'warning'],
    log: IS_PROD,
    debug: IS_PROD,
    alias: {
      react: 'inferno-compat',
      '@hocs': '~/components/hocs',
      '@shared': '~/components/shared',
      '@ui': '~/components/ui',
    },
    plugins: [
      BabelPlugin(),
      TypeScriptHelpers(),
      WebIndexPlugin({
        title: 'Fidee',
        template: path.join(PUBLIC, 'index.html'),
        path: '/static/',
        target: '../index.html',
      }),
      IS_PROD &&
        QuantumPlugin({
          bakeApiIntoBundle: 'vendor',
          treeshake: true,
          uglify: true,
        }),
    ],
  })

  vendor = fuse
    .bundle('vendor')
    .instructions(`~ index.tsx +tslib`)

  app = fuse
    .bundle('app')
    .instructions(`> [index.tsx]`)
})

Sparky.task('clean', () => Sparky.src(BUILD).clean(BUILD))
Sparky.task('build', ['clean', 'config'], () => fuse.run())

Sparky.task('default', ['clean', 'config'], () => {
  fuse.dev({ root: false, port: 3000 }, (server) => {
    const { app } = server.httpServer
    const dist = path.resolve(__dirname, BUILD)

    app.use('/static/', express.static(path.join(dist, 'static')))
    app.use(history())
    app.use((req, res) => {
      res.sendFile(path.join(dist, 'index.html'))
    })
  })

  vendor.watch()
  app.hmr().watch()

  return fuse.run()
})