Through vue-Use cli to Learn How to Modify Webpack Multi-Environment Configuration and Release Issues

Part of the reason why Vue is so popular now is also due to the official scaffold generation tool Vue.-The cli greatly simplifies the cost of environment setup for beginners, but in actual business, we often need to implement other functions to modify webpack. This article will learn vue based on some actual business needs first.-Templates generated by the cli, then make relevant modifications.

Vue-Directory for template files generated by the cli

├── README.md
├── build
│ ├── build.js
│ ├── check-versions.js
│ ├── dev-client.js
│ ├── dev-server.js
│ ├── utils.js
│ ├── webpack.base.conf.js
│ ├── webpack.dev.conf.js
│ └── webpack.prod.conf.js
├── config
│ ├── dev.env.js
│ ├── index.js
│ └── prod.env.js
├── index.html
├── package.json
├── src
│ ├── App.vue
│ ├── assets
│ │ └── logo.png
│ ├── components
│ │ └── Hello.vue
│ └── main.js
└── static

The main focus of this article is

build - The code of compilation tasks

config - webpack configuration file

package.json - Basic information of the project

The specific meaning of each line of webpack configuration is not introduced in detail here, please refer to vue2.0 scaffold webpack configuration file analysis

Common requirement one: multi-environment configuration and release

Vue-The template generated by cli only configures npm run dev, npm run build this script, respectively to start the development environment service and execute packaging. However, the normal company development process will have at least development, test simulation, and production environment, and the server request address of each environment or some configuration parameters will be different, and it is necessary to publish to multiple servers during the release, so it is necessary to execute automated scripts for building and releasing.

We first need to clarify this issue, quote an article, author: Zheng Haibo, link, source: Zhihu

This is actually unrelated to vue, it is a general issue: where the code is built. If the questioner's server refers to the running server, neither of the two is a good choice. Many newbies, including me before I started working, thought that the code deployment would be like this.

But it can be麻烦 in larger internet companies. The following descriptions are common practices, with some processes simplified to facilitate the understanding of newbies. When code is submitted to a git or svn server, note that it is the source file, not the file after build.

2. The server setup process will pull the code version to be released from the git server, where dependencies like the one mentioned by the questioner's vue are installed. It also builds files for deployment, which are generally compressed into a package for management.

3The published package after construction will be uploaded to the transit station: the file management server cluster.

4The actual running server is generally not a single server, but a cluster. These n servers will pull the corresponding version of the same compressed package from the file server and unzip it to run.

　

In fact, there is a clear sequence of procedures here. If it is all manual operation, it will be very麻烦, so generally large companies will have an automatic deployment platform to globally coordinate the completion of these tasks. As a developer, you only need to click 'One-click Deployment' to complete the above content.

If we are working with platforms like gitlab, github that provide webhook automatic notifications for automatic deployment, the stable version of the code has been pushed (Push Event). Then we don't even need to click the button. This is a typical case of separation of construction and deployment, which brings a lot of benefits, such as ensuring that the construction is a piece of code, avoiding the possibility of inconsistency due to multi-environment construction, building is generally a high-cost operation, which may cause the instability of the running server, can be quickly rolled back or restored, and the same version of the code does not need to be refactored building...

After so many explanations, it is not a simple thing to package and build, so we need automation tools to configure it. The existing mature solution is to build and publish an application container engine using docker. However, I am not familiar with this, and students who are familiar with it can share.

Summary

The above is what the editor introduces to everyone about the configuration and publishing issues of Webpack multi-environment, hoping it will be helpful to everyone. If you have any questions, please leave a message, and the editor will reply to everyone in time. At the same time, I would also like to express my sincere gratitude to everyone for their support of the Niyao tutorial!

Statement: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email for reporting. Provide relevant evidence, and once verified, this site will immediately delete the infringing content.)