Plugin system for apps compiled using Webpack

Question

For the context: I'm developing my own product using Symfony on the back-end and react/react-router on the front-end, which is tied together by Webpack. I'm planning to divide my app into "extensions", so I would have "core" bundle and multiple different extending bundles around it (which would be sets of additional features for my product).

Now, I would like for my front-end to be as extensible as my back-end. I would like to be able to add new React components with my extending bundles to the existing "core" set of components in my "CoreBundle".

However, it seems like the Webpack is encapsulating everything too tightly to be able to produce that kind of a plugin system. Is it possible to have multiple bundles that would have separate Webpack configurations, but their JavaScript would be interconnected in a way that would allow for developing of a plugin system? The goal is being able to develop JS of one Bundle independently but at the same time being able to use some already compiled JS resources from another Bundle in the process.

Answer 1

I think you should be able to achieve this using the DllPlugin and the DllReferencePlugin

The DllPlugin is used in a separate webpack config to create a dll only bundle. It also creates a manifest.json file which is used by the DllReferencePlugin to map dependencies.

Refer to the detailed documentation at

https://webpack.js.org/plugins/dll-plugin/

In my case, I use this to combine all vendor libraries (React, Flux, etc) in one build and then use that as a reference in my Other Webpack Config which bundles all my React components etc. but references React and other libraries using the DllReferencePlugin.

My webpack.dll.js config file:

var path = require("path");
var webpack = require("webpack");

module.exports = {
  entry: {
    libs: [path.join(__dirname, "common", "lib.js")]
  },
  output: {
    path: path.join(__dirname, "dist", "dll"),
    filename: "[name].dll.js",
    library: "[name]"
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, "dll", "[name]-manifest.json"),
      name: "[name]",
      context: path.resolve(__dirname, "common")
    }),
  ]
};

And then in my main webpack.config.js, I use the reference plugin.

 new webpack.DllReferencePlugin({
      context: path.resolve(__dirname, "common"),
      manifest:require('./dll/libs-manifest.json')
    })

Depending upon how you want to split your code, you can create multiple Dlls, each with a separate webpack config as per your requirements. And then refer the dll's as per your requirements in different other webpack bundles.