php - How to solve laravel modularization and webpack+vue.js solution?

Question

Recently, the company's projects require the use of vue family bucket element-ui to develop the backend, but the original project was written by requirejs, so all laravel modules can be installed and uninstalled independently, which means that their js and The css are all independent, and the common ones are placed directly in the themes/backend theme directory. Then the question arises, how does a single-page program implement this solution? The requirements are
(note: here The module is a module of laravel, not a module of js and npm)

1. Each module is installed independently. After installation, it will automatically publish the Resources/Bakcend/assets directory in the module to public/backend/modules/module name, and under themes/bakcend/index.blade.php can be automatically loaded (solved)

2. The backend of a single page is packaged using webpack, under the packaging directory public/backend/modules/module name, and automatically copied to modules/module name/Resources after packaging. /Bakcend/assets below (solved)

3. Each module can have its own backend menu, management interface, etc., and these are all implemented with vue, vue-router, element-ui. The entry pages of all modules are located at themes/backend_default/index. blade.php,(solved)
   4. Each module can be developed by different third parties and published to the general module center. Users can download the required modules by themselves ( PHP back-end has been solved, but there is a problem with front-end JS)

The problem occurs in the front-end aspect of the fourth requirement above. If an individual or an internal team develops all modules, there will be no such problem, but different third-party developments will cause webpack packaging problems

There are currently two solutions, but neither can fundamentally solve the problem

The first is Each laravel-module is packaged separately, but the public class library cannot handle it, because it is impossible for a single-page backend to generate a vendor.js for each module and place it publicly or put the public Put the class library into app.js, so that the vendor.js of each module (blog-module, core-module, dashboard-module, etc.) is loaded in the overall themes/backend_default/index.blade.php and app.js will repeatedly load these public class libraries

The second is Integrated packaging under a themes/backend theme
The resources of each module are placed in themes/backend/modules/{module-name} , automatically extracted to their respective module/Resources/Backend/assets after packaging, and then automatically publishassets in this module when others install the module. ##public/backend/modules/{module-name} directory, but this will not work, because if each developer is responsible for different modules, so in webpack.config.js or webpack The things packaged in .mix.js are also different. For example, if I write the app.js of blog module, and you write the app.js of dashboard module, then the assets packaged by each will be generated. The webpack module ids of vendor.js (files stored in the public class library) are different (even if the public class libraries of app.js of all modules are the same), the app.js of different modules are loaded after publish An error will occur because the vendor.js of each module is different and you cannot choose any one to load

How to solve this problem specifically?

Answer 1

Reference: /a/11...
SPA single-page web application based on webpack Mechanism to dynamically load plug-ins