EN
Preact - multiple entry points with multiple builds (multiple index file)
7 points
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.
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).
xxxxxxxxxx1
preact build --dest build-12
preact build --dest build-23
preact build --dest build-N
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.contextthat indicatessrc/directory.
Finally we can use the following preact.config.js file:
xxxxxxxxxx1
const path = require('path');2
3
export default (config, env) => {4
5
if (/\bbuild-1$/.test(env.dest)) { // build-16
const index = path.resolve(config.context, 'index-1');7
if (config.entry['ssr-bundle']) { // if pre-rendering is used8
config.entry['ssr-bundle'] = index;9
}10
config.resolve.alias['preact-cli-entrypoint'] = index;11
}12
13
if (/\bbuild-2$/.test(env.dest)) { // build-214
const index = path.resolve(config.context, 'index-2');15
if (config.entry['ssr-bundle']) { // if pre-rendering is used16
config.entry['ssr-bundle'] = index;17
}18
config.resolve.alias['preact-cli-entrypoint'] = index;19
}20
21
// ...22
23
if (/\bbuild-N$/.test(env.dest)) { // build-N24
const index = path.resolve(config.context, 'index-N');25
if (config.entry['ssr-bundle']) { // if pre-rendering is used26
config.entry['ssr-bundle'] = index;27
}28
config.resolve.alias['preact-cli-entrypoint'] = index;29
}30
};
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.:
xxxxxxxxxx1
import Index from './index-1';2
//import Index from './index-2';3
//import Index from './index-N';4
5
// only for development6
//7
export default Index;