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).
xxxxxxxxxx
1
preact build --dest build-1
2
preact build --dest build-2
3
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.context
that indicatessrc/
directory.
Finally we can use the following preact.config.js
file:
xxxxxxxxxx
1
const path = require('path');
2
3
export default (config, env) => {
4
5
if (/\bbuild-1$/.test(env.dest)) { // build-1
6
const index = path.resolve(config.context, 'index-1');
7
if (config.entry['ssr-bundle']) { // if pre-rendering is used
8
config.entry['ssr-bundle'] = index;
9
}
10
config.resolve.alias['preact-cli-entrypoint'] = index;
11
}
12
13
if (/\bbuild-2$/.test(env.dest)) { // build-2
14
const index = path.resolve(config.context, 'index-2');
15
if (config.entry['ssr-bundle']) { // if pre-rendering is used
16
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-N
24
const index = path.resolve(config.context, 'index-N');
25
if (config.entry['ssr-bundle']) { // if pre-rendering is used
26
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.:
xxxxxxxxxx
1
import Index from './index-1';
2
//import Index from './index-2';
3
//import Index from './index-N';
4
5
// only for development
6
//
7
export default Index;