vue-cli operates Webpack environment configuration

This time I will bring you vue-cli operation Webpack environment configuration, vue-cli operation Webpack environment configuration What are the precautions, the following are Let’s take a look at practical cases.

The reason why Vue is so popular now is partly due to the official scaffolding generation tool Vue-cli, which greatly simplifies the cost of setting up an environment for beginners. However, in actual business we often need to implement other functions To transform webpack, this article will first learn the template generated by vue-cli based on some actual business needs, and then make relevant modifications.

Vue-cli generated template file directory

├── 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 to compile the task

config - webpack's configuration file

package.json - Basic information about the project

The specific meaning of each line of webpack configuration will not be introduced in detail here. Please refer to the webpack configuration file analysis of vue2.0 scaffolding

Common requirement 1: Multi-environment configuration and release

The template generated by Vue-cli is only configured with npm run dev and npm run build scripts to start the development environment service and execute packaging respectively. Often, a normal company development process will have at least development, test simulation, and production environments. The server request address or some configuration parameters responded to by each environment will be different, and when publishing, it needs to be published to multiple servers, so it needs to be executed. Automated scripts. Build and release.

We must first clarify this issue and reprint an article, author: Zheng Haibo, link, source: Zhihu

This actually has nothing to do with vue, it is a general question: where the code is built. If the question's server refers to a running server, then neither option is actually a good choice. Many newcomers, including me, thought the deployment code looked like this before I started working.

But in fact, it will be more troublesome in larger Internet companies. The following introductions are common practices and some simplified processes are just for the convenience of newcomers to understand. Submit the code to the git or svn server. Note that this is the source file, not the built file.

The build server will pull the code version to be released from the git server and complete it here.InstallationDependencies, Such as the title of vue. And build files for deployment. These files are generally compressed into a compressed package for management

The built release package will be uploaded to the transfer station: File Management Server Cluster

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

In fact, there are obvious sequential processes here, which would be very troublesome if done manually. Therefore, generally large companies will have an automatic deployment platform to coordinate and complete these tasks. As a developer, you only need to click "One-click deployment" will complete the above content

For example, when cooperating with webhooks provided by gitlab and github, they automatically notify the automatic deployment platform that 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 build and deployment, which brings many benefits, such as ensuring that a copy of the code is built, and avoiding the possibility of inconsistencies caused by multi-environment builds. Building is generally a high-overhead behavior, which may Instabilities that cause instability in the running server can be quickly rolled back or restored, and the same version of the code does not need to be rebuilt. . .

Having said so much, packaging and building is not a simple matter, so automated tools are needed to configure it. The existing mature solution is to use docker to build an application container engine to build, publish, etc. However, I am not familiar with this area. Some students who are familiar with it can share it.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

vue-cli webpack How to build a vue development environment

How to use native JS for multiple scroll bars Synchronous operation

The above is the detailed content of vue-cli operates Webpack environment configuration. For more information, please follow other related articles on the PHP Chinese website!