jstrimpel/how.md

## how.md

      
    Raw
  

              how.md
            
          
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?

Requirement

There are two separate build processes:

Core: This builds a distribution of common core dependencies
Component: This externalizes anything in core build

Use Case

The following two files are entry points for two different build processes. The component entry webpack config defines core as an external.
Core build entry

// core.js
export default () => {
  console.log('i am core');
}

Component build entry

import core from 'core';
core();

HTML

<!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>
Issue

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.