How to create a Fusebox project with multiple html pages?

Question

I'm new to bundlers and am currently learning about Fusebox. I really like it so far except that I can't figure out how to use it for a multi-page project. So far I've only been able to find a tutorial on how to do this using webpack, not for fusebox.

---

Input files in src folder:

• index.html
• index2.html
• index.ts

Desired output in dist folder:

• app.js
• vendor.js
• index.html
• index2.html

Actual output in dist folder:

• app.js
• vendor.js
• index.html

Here is my config in the fuse.js file:

Sparky.task("config", () => {
    fuse = FuseBox.init({
       homeDir: "src",
       output: "dist/$name.js",
       hash: isProduction,
       sourceMaps: !isProduction,
       plugins: [
           [SassPlugin(), CSSPlugin()],
           CSSPlugin(),
           WebIndexPlugin({ 
               title: "Welcome to FuseBox index",
               template: "src/index.html"
           },
           WebIndexPlugin({ 
               title: "Welcome to FuseBox index2",
               template: "src/index2.html"
           },
           isProduction && UglifyJSPlugin()
        ]
    });

    // vendor should come first
    vendor = fuse.bundle("vendor")
        .instructions("~ index.ts");

    // out main bundle
    app = fuse.bundle("app")
        .instructions(`!> [index.ts]`);

    if (!isProduction) {
        fuse.dev();
    }
});

Setting WebIndexPlugin twice within plugins doesn't work. What is the correct way to set up a multi-html page project with fusebox?

Answer 1

The WebIndexPlugin can not be configured, to output more than one html file.

But if you don't use a hash for the generated bundles (e.g.: output: "dist/$name.$hash.js"), you don't need the WebIndexPlugin -- you can remove it completly from the plugins option. Because you already know the names of the generated bundles (vendor.js and app.js) you can just include the following lines

<script src="vendor.js"></script>
<script src="app.js"></script>

instead of the placeholder $bundles.

If you want, that both html files are copied from your src directory into your dist directory, you can add the following lines to your fuse.js script:

const fs = require('fs-extra');
fs.copySync('src/index.html', 'dist/index.html');
fs.copySync('src/index2.html', 'dist/index2.html');

Note: Don't forget to add fs-extra:^5.0.0 to your package.json

Answer 2

Might not been the case when the question was asked, but WebIndexPlugin now can be specified multiple times and also takes optional bundles parameter where list of bundles to be included in html can be specified (all bundles are included by default).

For example 2 html files (app1.html, app2.html) where each includes a common library (vendor.js), and different entry points (app1.js and app2.js)

• app1.html
  • vendor.js
  • app1.js
• app2.html
  • vendor.js
  • app2.js

Config would look like this:

const fuse = FuseBox.init({
    homeDir : "src",
    target : 'browser@es6',
    output : "dist/$name.js",
    plugins: [
        WebIndexPlugin({
            target: 'app1.html',
            bundles:['vendor', 'app1']
        }),
        WebIndexPlugin({
            target: 'app2.html',
            bundles:['vendor', 'app2']
        })
    ]
})
// vendor bundle, extracts dependencies from index1 and index2:
fuse.bundle("vendor").instructions("~[index1.ts,index2.ts]")

// app1 and app2, bundled separately without dependencies:
fuse.bundle("app1").instructions("!>index1.ts")
fuse.bundle("app2").instructions("!>index2.ts")