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