My objective is to create two bundles during the build process, one for the index.tsx file and another for the lazy.tsx file. I am confident that there are one or two options that I am overlooking.
Check out the example project on GitHub - example project link
File src/index.tsx
import { render, h } from 'preact';
let a: any = null;
let b = 0;
const App = () => (
<div>
<button
onClick={() => {
import('./lazy').then(M => {
console.log('LOADED COMPONENT');
a = <M.default />;
b++;
render(<App></App>, document.body);
});
}}
>
test
</button>
{a} {b}
</div>
);
render(<App></App>, document.body);
src/lazy.tsx
import { h, FunctionComponent } from 'preact';
console.log('LAZY');
interface LazyProps {}
const Lazy: FunctionComponent<LazyProps> = props => {
const {} = props;
return <div>LAZY LOADED COMPONENT</div>;
};
export default Lazy;
Webpack configuration
{
entry: {
index: `${__dirname}/src/index.tsx`
},
output: {
path: resolve(__dirname, 'dist'),
chunkFilename: '[name].[id].js',
filename: '[name].bundle.js'
},
plugins: [new HtmlWebpackPlugin()],
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: [/node_modules/]
}
]
},
resolve: {
extensions: ['.tsx', '.ts', '.js']
},
optimization: {
minimize: false
}
}
Although the above code is error-free and functioning properly, it does not produce multiple bundles as intended when using Webpack's code splitting feature.
Edit: Check out the working example project here.