Using FuseBox as a Bundling Alternative to webpack for React

Seeking a webpack alternative? Consider FuseBox. It offers comparable features—code splitting, hot module reloading, dynamic imports—but with a significant advantage: code splitting is zero-configuration by default (a feature webpack only gained in version 4.0).

FuseBox prioritizes simplicity (via streamlined configuration) and performance (through aggressive caching). Its extensibility via plugins allows for handling advanced needs beyond its defaults. And for TypeScript users, it's a first-class citizen, meaning TypeScript projects require no extra configuration. JavaScript projects are equally well-supported.

Let's build a basic React app to demonstrate its ease of use. The complete code is available on GitHub.

FuseBox isn't the only webpack alternative; Maks Akymenko's excellent article on Parcel highlights another strong contender.

Basic Setup

1. Create a new project directory and initialize it with npm:

mkdir csstricks-fusebox-react && cd $_
npm init -y

2. Install React and React DOM:

npm install --save react react-dom

3. Install FuseBox, TypeScript, UglifyJS, and Node Sass:

npm install --save-dev fuse-box typescript uglify-js node-sass

4. Create a src folder and add app.js and index.js:

// App.js
import * as React from "react";
import * as logo from "./logo.svg";

const App = () => (
  <div classname="App">
    <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/?x-oss-process=image/resize,p_40" class="lazy" alt="Using FuseBox as a Bundling Alternative to webpack for React ">
  </div>

The above is the detailed content of Using FuseBox as a Bundling Alternative to webpack for React. For more information, please follow other related articles on the PHP Chinese website!