Plugin system for applications compiled using Webpack

Question

In context: I develop my own product using Symfony on the back-end and react / react-router on the interface that is connected by Webpack. I plan to divide my application into "extensions", so I will have a "main" package and several different expanding packages around it (which will be a set of additional functions for my product).

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

However, it seems that Webpack is encapsulating everything too much to be able to create such a plug-in system. Is it possible to have several packages that will have separate Webpack configurations, but their JavaScript will be interconnected in a way that would allow to develop a plug-in system? The goal is to independently develop the JS of one Bundle, but at the same time be able to use some already compiled JS resources from another Bundle in the process.

Answer 1

I think you can achieve this using DllPlugin and DllReferencePlugin

DllPlugin webpack dll . manifest.json, DllReferencePlugin .

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

, (React, Flux ..) , Webpack, React .., React , DllReferencePlugin.

webpack.dll.js:

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")
    }),
  ]
};

webpack.config.js .

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

, , Dll, webpack . dll -.