Preact - multiple entry points with multiple builds (multiple index file)

In this short article, we would like to show how to configure Preact to work with multiple entry points.

Warning: by default Preact does not provide multiple entry points, so we need to do some trick.

Simple steps

Before we will start: multiple entry points usage, causes multiple builds to get a proper working application variant. This way each build contains only necessary source code (only specific imports).

1. Use --dest parameter to run specific build variant:

preact build --dest build-1
preact build --dest build-2
preact build --dest build-N

2. Configure preact.config.js file located directly in the project directory.

Explaination: having access to --dest argument as env.dest property, we should update the following WebPack configuration:

• config.entry['ssr-bundle']
• config.resolve.alias['preact-cli-entrypoint'].

Note: it is good to use config.context that indicates src/ directory.

Finally we can use the following preact.config.js file:

const path = require('path');

export default (config, env) => {

    if (/\bbuild-1$/.test(env.dest)) { // build-1
        const index = path.resolve(config.context, 'index-1');
        if (config.entry['ssr-bundle']) { // if pre-rendering is used
            config.entry['ssr-bundle'] = index;
        }
        config.resolve.alias['preact-cli-entrypoint'] = index;
    }

    if (/\bbuild-2$/.test(env.dest)) { // build-2
        const index = path.resolve(config.context, 'index-2');
        if (config.entry['ssr-bundle']) { // if pre-rendering is used
            config.entry['ssr-bundle'] = index;
        }
        config.resolve.alias['preact-cli-entrypoint'] = index;
    }

    // ...

    if (/\bbuild-N$/.test(env.dest)) { // build-N
        const index = path.resolve(config.context, 'index-N');
        if (config.entry['ssr-bundle']) { // if pre-rendering is used
            config.entry['ssr-bundle'] = index;
        }
        config.resolve.alias['preact-cli-entrypoint'] = index;
    }
};

3. Create multiple indexes, e.g.

• src/index-1.jsx,
• src/index-2.jsx,
• src/index-N.jsx.

From now src/index.jsx will be used to start specific development version, e.g.:

import Index from './index-1';
//import Index from './index-2';
//import Index from './index-N';

// only for development
//
export default Index;