Is it possible to have separate build processes that generate bundles that define dependencies, which can be used by an application without having to expose globals and rely on aliases?
There are two separate build processes:
- Core: This builds a distribution of common core dependencies
- Component: This externalizes anything in core build
The following two files are entry points for two different build processes. The component entry webpack config defines core as an external.
// core.js
export default () => {
console.log('i am core');
}
import core from 'core';
core();
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
</body>
<script type="text/javascript" src="./dist/core.js"></script>
<script type="text/javascript" src="./dist/index.js"></script>
</html>
The example above throws because core
is undefined
. This is because core.js
and index.js
do not share a common build process. As such standard code splitting techniques, CommonsChunkPlugin, splitChunks, and Dll(Reference)Plugin solution do not work.