Shulou(Shulou.com)05/31 Report--

Today, the editor will share with you what are the relevant knowledge points about the difference between npm run dev and npm run build in vue. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.

The details are as follows:

├─ build │ ├─ build.js │ ├─ check-versions.js │ ├─ dev-client.js │ ├─ dev-server.js │ ├─ utils.js │ ├─ vue-loader.conf.js │ ├─ webpack.base.conf.js │ ├─ webpack.dev.conf.js │ ├─ webpack.prod.conf.js webpack.test.conf.js config dev.env.js index.js ├─ prod.env.js │ └─ test.env.js ├─... └─ package.json

These are all the files about bulid and run

Instruction analysis

In package.json

"dev": "node build/dev-server.js", "build": "node build/build.js"

Meaning: when you run "npm run dev", you execute the build/dev-server.js file

When you run "npm run build", you execute the build/build.js file.

Build folder analysis

Build/dev-server.js

Npm run dev executes the file build/dev-server.js file, which executes:

Check versions of node and npm

Introduce relevant plug-ins and configurations

Create an express server and webpack compiler

Configure development middleware (webpack-dev-middleware) and hot-reload middleware (webpack-hot-middleware)

Mount agent services and middleware

Configure static resources

Start the server to listen on a specific port (8080)

Automatically opens the browser and opens a specific URL (localhost:8080)

Description: the express server provides static file services, but it also uses http-proxy-middleware, a middleware for http request agents. If you need to use the background API in the front-end development process, you can configure proxyTable to proxy the corresponding background requests to a dedicated API server.

Build/webpack.base.conf.js

The webpack configuration that dev-server depends on is the webpack.dev.conf.js file

Webpack.prod.conf.js is used in the test environment

Webpack.base.conf.js is also quoted in webpack.dev.conf.js.

Webpack.base.conf.js mainly accomplishes the following things:

Configure the webpack compilation entry

Configure webpack output paths and naming rules

Configure module resolve rules

Configure processing rules for different types of modules

Only .js, .vue, pictures, fonts and other file processing rules are configured in this configuration. If you need to deal with other files, you can configure them in module.rules.

Build/webpack.dev.conf.js

Add and improve the following configuration of the development environment on the basis of webpack.base.conf, including the following things:

Add hot-reload-related code to entry chunks

Merge basic webpack configuration

Use styleLoaders

Configure Source Maps

Configure the webpack plug-in

Build/check-versions.js and build/dev-client.js

Finally, there are two relatively simple files under the build folder

Dev-client.js doesn't seem to be used, and the code is relatively simple, so I won't talk about it here.

Check-version.js completes version testing of node and npm

Build/utils.js and build/vue-loader.conf.js

Utils.js and vue-loader.conf.js are used in the webpack configuration file, and utils mainly accomplishes the following three things:

Configure static resource path

Generate cssLoaders to load styles in .vue file

Generate styleLoaders to load separate style files that do not exist in the .vue file

Vue-loader.conf only configures the css loader and automatically adds prefixes after compiling css.

Build/build.js

Configuration in the build environment

Build.js mainly accomplishes the following things:

Loading animation

Delete create destination folder

Webpack compilation

Output information

Build/webpack.prod.conf.js

The webpack configuration used in the build comes from webpack.prod.conf.js, which is also a further improvement on the basis of webpack.base.conf. The main tasks are as follows:

Merge basic webpack configuration

Use styleLoaders

Configure the output of webpack

Configure the webpack plug-in

Webpack plug-in configuration in gzip mode

Webpack-bundle analysis

Description: there are many plug-ins such as vilifying compression code and extracting css files in the webpack plug-in.

Config folder analysis

Config/index.js

The main file under the config folder is index.js.

The configuration in both the development and build environments is described here, and there are a number of files in the previous build folder that refer to the configuration in index.js.

Config/dev.env.js, config/prod.env.js and config/test.env.js

These three files simply set the environment variables, nothing special.

This is the basic introduction to webpack. Webpack has many plug-ins that need to be explored.

These are all the contents of the article "what's the difference between npm run dev and npm run build in vue". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.