The premise

If we can generate multiple static resource packages according to modules when developing system A, there will be multiple sub-directories in the final result, and each sub-directory can run independently to complete A business function. In this way, any system we have that needs any modules we have developed can be packaged directly with designated modules and assembled flexibly.

Advantages:

  • 1, flexible assembly with other systems
  • 2. Each module is not influenced by each other, so it is not restricted by the framework and development mode
  • 3. Different modules can be deployed separately
  • 4, late maintenance risk is small, can continue, stable maintenance

Disadvantages:

  • 1. Each module has an independent resource package, so if there is the same resource reference, it cannot be reused
  • 2. Module assembly depends on IFrame, so browser security Settings, cookie sharing and other issues should be dealt with separately
  • 3. Wrap the component with an IFrame. The scope that the component can control is the IFrame it belongs to
  • 4. Communication between different components is troublesome

Achieve the goal

Vue-cli default packaging results:

Train of thought

Since our current project is multi-module, each module should have its own entry, so we modify the SRC directory structure as follows:

Then the directory structure in the module is shown as follows:

  • SRC is the same as main.js, index.html and app.vue, but we changed main.js to index.js.
  • As for the module to use routing, state management can be configured according to their own needs.

Here are the detailed steps to modify the WebPack configuration

  • Step 1: Add build/module-conf.js to handle module directory fetching
  • Step 2: Add build/build-all.js to handle cyclic execution of package commands
  • Step 3: Modify build/build.js to add the MODULE_ENV parameter to record the name of the module currently packaged and the MODE_ENV parameter to record the current packaged mode
  • Step 4: Modify the config/index.js configuration, including the export directory configuration, HTML entry template configuration, and static resource path configuration
  • Step 5: Modify the entry configuration of webpack.base.conf.js, dynamically configure the entry file according to the parameters
  • Step 6: Modify the configuration of webpack.dev.conf.js, add the configuration of webpackHtmlPlugin in multi-entry mode, and add the configuration of static resource server
  • Step 7: Modify the webpack.prod.conf.js configuration to add handling for different packaging modes.
  • Step 8: Modify package.json by adding the NPM run build-all directive

Build instructions

  • Package all modules into a resource bundle. The entry for each module is a module.html file. Static resources are in the static directory
npm run build
Copy the code
  • Package specified modules into a resource bundle. The entry for each module is a module.html file. Static resources are stored in the static directory
npm run build moduleName1,moduleName2,...
Copy the code
  • Packaging all modules, then each module is independent of each other, a few modules, a few static resource bundles, this approach does not reuse duplicate resources
npm run build-all 
Copy the code