Webpack Integration Investigation

Webpack Integration Investigation

Goal

See if we can create visual component blades that are bundled by Webpack, and then served via BRJS. To do this we need to answer the following questions:

1. Can we load multiple Webpack bundles?
2. Is there a simple way to handle common dependencies without having to load the same code twice?
3. Can we use source maps for all bundles?

Method

1. Create a simple "Square" module that is bundled by Webpack.
2. Create a "RedSquare" module that extends "Square" and is also bundled by Webpack.
3. Get BRJS to serve the resulting bundles, (not the source files).
4. Use the "output.library" and "output.libraryTarget" config options to allow modules to be required by the BRJS code.
5. Use the "externals" config option to prevent Webpack from bundling external dependencies, and get BRJS to pull them in instead.
6. Use the CommonChunkPlugin to remove common Webpack dependencies (the Webpack runtime and Loaders) from the module bundles, and serve them via BRJS.

Result

1. Created a simple "Square" module that is bundled by Webpack. ✓ (Code here)
2. Created a "RedSquare" module that extends "Square" and is also bundled by Webpack. ✓ (Code here)
3. Took the bundle files and put them into thirdparty libraries. ✓
4. Used the "output.library" config option to allow modules to be required by the BRJS code (didn't need to use "output.libraryTarget"). ✓
5. Used the "externals" config option (using "commonjs2") to prevent Webpack from bundling external dependencies, and get BRJS to pull them in instead. ✓
6. Tried using the CommonChunkPlugin to remove common Webpack dependencies from the module bundles, but found it to be unsuitable for the task, as it keeps the dependencies private within Webpack (they are obfuscated, so cannot be accessed externally). I suspect it would be possible to write our own plugin to do this, but the plugin API is not simple to understand, and has very little in the way of good examples of how to use it. ✗

Conclusion

It is possible to include Webpack modules in a BRJS app relatively easily, but each module will contain duplicates of Webpack's code (my simple modules had around 350 lines of shared Webpack code). We can possibly do more work to prevent this from happening, but I suspect that the effort required to do this will outweigh the benefits.