I am confused with webpack usage, as webpack is dependency manager and creates a bundle but this is not happening in CoreUi template.
Means this coreUi template using React Lazy loading like const Login = React.lazy(() => import('./views/Pages/Login')); but its not using webpack.
So how lazy loading working ? Is webpack not necessary for lazy load ? If yes then why webpack ?
Webpack is a bundling library and has nothing to do with dependency management (npm do the dependency management for node and javascript front-end apps), Webpack role here is the code splitting and resolving dynamic import and determine which part of the code is needed e.g:
import { add } from './math';
console.log(add(16, 26));
to support lazy loading use dynamic imports:
import("./math").then(math => {
console.log(math.add(16, 26));
});
so if your code looks like the later, (if Webpack is configured for lazy loading) it will handle React lazy loading code properly to increase the performance by using only the need code for the current running part of your code.
Webpack is not the only bundler that support dynamic imports, there is Rollup and browserify/factor-bundle.
Take home, webpack is not needed for React lazy loading to work, all you need is a bundler that support code splitting and dynamic import.
