Webpack: How can I combine two completely separate packages using dynamic linking

Question

I spent a lot of time studying this, but to no avail. I know how code separation and dynamic linking work in Webpack using the import APIs.

Howevr, my use case is that I have two completely separate packages that are generated separately using different webpack assemblies. To give you perspective, I create React components, and there is a requirement to dynamically load the react component into a page that was compiled in another process. Is it possible to react? I have control over webpack builds, so I can eliminate dependencies, etc.

Update: I just looked at Vue.js and how it allows developers to register Vue.js components and then reference them later in the code. I can potentially load my Vue.js component scripts in front of my script page. I'm trying to figure out if I can do something like this in React.

Answer 1

I understood you correctly: you essentially got

• React custom component library (built using Webpack build # 1)
• a React application that should use some (all) of these components (built with Webpack build # 2, completely separate from # 1)

?

If so, read on.

"Is this possible in the reaction?" instead, the question should be “Is this possible in Webpack?” and the answer is “Yes.” The following is being tested with Webpack 2, but should also work with v.1.

Let me name your projects Lib (your library of React component components) and App (consumer library).

In the Lib project:

• Create an entry point file, say index.js , which exports all custom React components as follows:

   import {Button} from './button'; import {DatePicker} from './DatePicker'; import {TextBox} from './textBox'; export const MyComponentLib = { Button, DatePicker, TextBox }; 

• Update webpack.config.js so that the project combines the UMD library (it may also be "var") and set the entry point to the above index.js file. This will make your library accessible through a global variable named MyComponentLib (the name comes from export above) in the consumer application later:

    ... output: { path: './dist', filename: 'mylib.bundle.js', libraryTarget: 'umd' }, ... entry: './index.js', ... 

In the App project:

• In the index.html file, you will have two <script> : one for mylib.bundle.js ( Lib project output), and the other for the App project package itself. You may have more packages (application, provider, etc.), I just simplify the situation here.

• Update webpack.config.js to mark the component library as an external dependency. Here MyComponentLib also the name of the global variable available to the library, and myComponents is the name that should be used in import statements:

   ... externals: { myComponents: 'MyComponentLib' }, ... 

Now in the App you can import the component as follows:

 import {DatePicker} from 'myComponents'; 

This will dynamically load the DatePicker from the component library at runtime through a global variable.

Bonus: if you use eslint , you do not want it to complain about missing modules, which, as you know, are external; add this to your .eslintrc :

 ... "settings": { "import/core-modules": ["myComponents"] }, ...