Example fuse-box config with code splitting

fuse.ts

import * as autoprefixer from "autoprefixer";
import * as express from "express";
import {
  Bundle,
  CSSPlugin,
  FuseBox,
  FuseBoxOptions,
  ImageBase64Plugin,
  JSONPlugin,
  PlainJSPlugin,
  PostCSSPlugin,
  QuantumPlugin,
  ReplacePlugin,
  WebIndexPlugin,
} from "fuse-box";
import { TypeHelper } from "fuse-box-typechecker";
import { context, src, task } from "fuse-box/sparky";
import * as path from "path";
import { env } from "process";
import * as rimraf from "rimraf";
const fallback = require("express-history-api-fallback");

const isProduction = env.NODE_ENV === "production";

const basePlugin = [
  JSONPlugin(),
  PlainJSPlugin(),
  ImageBase64Plugin({
    useDefault: true,
  }),
  // PostCSSPlugin([autoprefixer()]),
  CSSPlugin(),
];

const config = {
  getDevPlugins(): any[] {
    return [
      ...basePlugin,
      WebIndexPlugin({
        template: "src/index.html",
        title: "[dev]",
      }),
    ];
  },
  getProductionPlugins() {
    return [
      ...basePlugin,
      WebIndexPlugin({
        template: "src/index.html",
        title: "",
      }),
      ReplacePlugin({ "process.env.NODE_ENV": JSON.stringify("production") }),
      QuantumPlugin({
        bakeApiIntoBundle: "app",
        css: true,
        polyfills: ["Promise"],
        treeshake: true,
        uglify: true,
      }),
    ];
  },
  getBundles(fuse: FuseBox): Bundle[] {
    return [
      fuse.bundle("vendor").instructions("~ App.tsx"),
      fuse.bundle("app").instructions("> [App.tsx]"),
    ];
  },
  getFuseboxConfig(plugins: any[]): FuseBoxOptions {
    return {
      alias: {
        "~/component-indexof.js": "component-indexof",
      },
      homeDir: "src",
      output: "dist/$name.js",
      plugins,
      sourceMaps: {
        project: true,
        vendor: false,
      },
      target: "browser@es5",
      useTypescriptCompiler: true,
    };
  },
};

context(() => config);

task("dev", (ctx: typeof config) => {
  const plugins = ctx.getDevPlugins();
  const fuseboxConfig = ctx.getFuseboxConfig(plugins);
  const fuse = FuseBox.init(fuseboxConfig);
  const bundles = ctx.getBundles(fuse);
  bundles.forEach(it => {
    const item = it.watch().hmr();
  });
  fuse.dev({ root: false }, server => {
    const app = server.httpServer.app;
    const distDir = path.resolve("./dist");
    const publicDir = path.resolve("./public");

    // serve static file from public folder
    app.use("/public/", express.static(publicDir));

    // html5 fallback
    app.use(express.static(distDir));
    app.use(fallback("index.html", { root: distDir }));
  });

  fuse.run();
});

task("build", (ctx: typeof config) => {
  const plugins = ctx.getProductionPlugins();
  const fuseConfig = ctx.getFuseboxConfig(plugins);
  const fuse = FuseBox.init(fuseConfig);
  const bundles = ctx.getBundles(fuse);
  fuse.run();
});

task("check", (ctx: typeof config) => {
  const typeHelper = TypeHelper({
    basePath: "./",
    name: "Checking type for App",
    tsConfig: "./tsconfig.json",
    tsLint: "./tslint.json",
  });
  typeHelper.runWatch("./src");
});

task("clean", async (ctx: typeof config) => {
  rimraf("./dist/*.*", (err: Error) => {
    console.log(err);
  });
});