Languages
[Edit]
EN

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

1 points
Created by:
Root-ssh
103710

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

Multiple entry points usage, causes multiple builds to get a proper working application variant.

So, we can use --dest parameter to make a build:

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

It is necessary to configure preact.config.js file located directly in the project directory.

Having access to --dest as env.dest, we should update:

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

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

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;
    }
};

The last thing is to create multiple indexes, e.g.

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

src/index.jsx will be used for stating 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;
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join