Webpack Plugin System for Building Web Applications

Question

Webpack Plugin System for Building Web Applications

In the context of my project, I am currently working on a product utilizing Symfony for the back-end and react/react-router for the front-end, all connected via Webpack. My plan is to structure my app into different "extensions", which would consist of a "core" bundle and additional bundles with unique features for the product.

I strive for the same level of extensibility in the front-end as I have in the back-end. I want to be able to seamlessly integrate new React components from the extending bundles into the existing set of components within the "CoreBundle".

Despite this ambition, it appears that Webpack's tight encapsulation may hinder the creation of such a plugin system. Is it feasible to have multiple bundles with individual Webpack configurations, yet have interconnected JavaScript code that allows for the development of a plugin system? The ultimate objective is to work on JS for one Bundle independently while also being able to utilize pre-compiled JS resources from another Bundle simultaneously.

reactjs symfony plugins webpack react-router-v4

Answer 1

Answer №1

To achieve this, consider utilizing the DllPlugin and DllReferencePlugin in your webpack configuration.

The DllPlugin is a useful tool for creating a separate bundle containing only libraries. It generates a manifest.json file that the DllReferencePlugin uses to resolve dependencies.

For detailed information, visit:

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

In my scenario, I consolidate all vendor libraries (such as React, Flux) into one build using DllPlugin, then reference it in another webpack config which bundles React components while importing React and other libraries through DllReferencePlugin.

This is an example of my webpack.dll.js configuration 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")
    }),
  ]
};

In my main webpack.config.js, I utilize the DllReferencePlugin as follows:

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

By creating multiple Dlls with separate webpack configurations according to your needs, you can efficiently manage code splitting and reference dll's in different webpack bundles as required.

Answer 2

To achieve this, consider utilizing the DllPlugin and DllReferencePlugin in your webpack configuration.

The DllPlugin is a useful tool for creating a separate bundle containing only libraries. It generates a manifest.json file that the DllReferencePlugin uses to resolve dependencies.

For detailed information, visit:

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

In my scenario, I consolidate all vendor libraries (such as React, Flux) into one build using DllPlugin, then reference it in another webpack config which bundles React components while importing React and other libraries through DllReferencePlugin.

This is an example of my webpack.dll.js configuration 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")
    }),
  ]
};

In my main webpack.config.js, I utilize the DllReferencePlugin as follows:

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

By creating multiple Dlls with separate webpack configurations according to your needs, you can efficiently manage code splitting and reference dll's in different webpack bundles as required.

Webpack Plugin System for Building Web Applications

Answer №1

Similar questions

Symfony allows for unique field validation for one-to-many relationships

What is the best way to create a unique page transition animation using Framer Motion and Next.js?

Adjust the dimensions of the react-dropdown-tree-select element to better fit your needs

Utilizing StyleFunctionProps within JavaScript for Chakra UI Enhancements

Experiencing difficulties establishing a connection between the React client and Node.js server using SocketIO

Updating subdata in an array using Reactjs handleChange

Uninstalling Vue.js from a Rails application using webpack

Tips for rendering the title based on the specific ID provided by the API in nextJS

Centering the logo using Material-UI's alignment feature

Having trouble deploying my MERN app on Vercel because I keep getting a "NOT FOUND" error message

Next JS now includes the option to add the async attribute when generating a list of script files

what is the best way to eliminate comments from nested arrays when using useReducer?

Tips for aligning a Material UI FAB button in the center and keeping it in the center while resizing the window

The issue with Next.js is that cookies are not being transmitted along with fetch requests, even when credentials are

The declared type 'never[]' cannot be assigned to type 'never'. This issue is identified as TS2322 when attempting to pass the value of ContextProvider using the createContext Hook

Adjusting the default format_date for SonataSonata's default

React Native throws an error when trying to convert a JSON value of type NSNULL, which is '<null>', to a valid URL

What is the best way to send a socket.io message to a particular user who is currently

Struggling with a React Native build warning problem?

The additional cost associated with using a React hook is called the "