webpack subpackage+vue-cli run/package different projects according to different command lines
Article directory
foreword
I am engaged in government software development, and government software development is often customized development, but it will appear again, for example, this unit needs this page, and that unit does not need this page, and over time, front-end projects will become more and more It becomes more and more redundant, because the requirements of different units are in the same project, and the speed of packaging will become slower and slower. At this time, subcontracting seems urgent.
1. What is webpack subpackaging?
Subpackaging is just like the literal meaning, and the small program also has the function of subpackaging, because the small program limits the code memory of the main package to no more than 2M. According to different projects, the corresponding projects are packaged to reduce the file memory.
2. Operation steps
1. Modify the webpack entry, changing a single entry to multiple entries
Take vue-cli as an example:
Originally, there was only a single entry in vue.config.js:
After modification: 
projectA and projectB correspond to different projects, but these two projects are in the same package, and some public components inside , a public tool, both of which can be shared, the only difference is that the pages in A and B are different.
2. Modify the project structure
Now that project A and project B have been configured in vue-config, the project structure should also be modified accordingly, as shown in the figure: In fact, the previous
app.vue, main.js and other files are copied one more. Commonly used files and components are placed in external components or untils
3. Make different packages according to different command lines
After the above two steps are completed, the subpackage is basically over. Next, you need npm install --save-dev cross-env This is a script for running cross-platform settings and using environment variables. Then modify the running code in package.json.
At the same time, you need to modify vue.config, js, as shown in the figure:
the final running result is as follows:
Summarize
The webpack subpackage here is just to provide an idea. In fact, you can also use git to manage the differences between different versions. This method is currently more commonly used. You can also simply use the BFF mode to solve it, or use lerna do a good job of physical isolation, in short, it depends on your personal preference! ! !