I have spent a lot of time looking into this, but to no avail. I am aware of how code splitting and dynamic bundling works in Webpack using the import
promise API.
Howevr, my use case is that I have two completely separate bundles, generated separately using different webpack builds. To give you perspective, I am building React components and there is a requirement to dynamically load a react component into the page that has been compiled in a different process. Is this possible in react? I do have control over both webpack builds, so I can exclude 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 could potentially load my Vue.js component scripts before my page script. I'm trying to see if I can do something similar in React.
Chunk: This webpack-specific term is used internally to manage the bundling process. Bundles are composed out of chunks, of which there are several types (e.g. entry and child).
Code-Splitting is a feature supported by bundlers like Webpack, Rollup and Browserify (via factor-bundle) which can create multiple bundles that can be dynamically loaded at runtime.
You can bundle your JavaScript using the CLI command by providing an entry file and output path. Webpack will automatically resolve all dependencies from import and require and bundle them into a single output together with your app's script. But that's just the bare minimum it can do.
When webpack processes your application, it internally builds a dependency graph from one or more entry points and then combines every module your project needs into one or more bundles, which are static assets to serve your content from.
Did I understand you correctly: you have essentially got
?
If yes, then read on.
The "Is this possible in react?" question should instead be "Is this possible in Webpack?", and the answer is "Yes". The following is tested with Webpack 2, but should also work with v.1.
Let's call your projects Lib
(your React component library) and App
(the library consumer).
In the Lib
project:
Create an entry point file, say index.js
, that exports all the custom React components like this:
import {Button} from './button';
import {DatePicker} from './DatePicker';
import {TextBox} from './textBox';
export const MyComponentLib = {
Button,
DatePicker,
TextBox
};
Update webpack.config.js
to make the project's bundle a UMD library (could also be 'var'), and set the entry point to the above index.js
file. Doing so will make your library available via a global variable named MyComponentLib
(the name comes from the export
above) in the consuming app later on:
...
output: {
path: './dist',
filename: 'mylib.bundle.js',
libraryTarget: 'umd'
},
...
entry: './index.js',
...
On to the App
project:
In the index.html
file you will have two <script>
tags: one for mylib.bundle.js
(the output of the Lib
project), and another for the bundle of the App
project itself. You might have more bundles (app, vendor etc.), I'm just simplifying things here.
Update webpack.config.js
to mark the component library as external dependency. Here, MyComponentLib
is, again, the name of the global variable the library is available at, and myComponents
is the name to use in import
statements:
...
externals: {
myComponents: 'MyComponentLib'
},
...
Now, in App
you can import a component like this:
import {DatePicker} from 'myComponents';
This will dynamically load DatePicker from the component library at run time via the global variable.
Bonus: if you use eslint
, you don't want it to complain about missing modules that you know are external; add this to your .eslintrc
:
...
"settings": {
"import/core-modules": ["myComponents"]
},
...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With