vue-cli configuration file (detailed tutorial)

This article mainly introduces how webpack in vue-cli is configured. This article mainly analyzes the relevant code in the config folder in vue and the file structure of config. Interested friends can refer to this article

I have been studying webpack recently, and suddenly I wanted to see how webpack is configured in vue-cli. I read many related articles, so I also came up with a few things about vue-cli configuration. As the saying goes, "If you want to do your job well, you must first sharpen your tools"! This article mainly analyzes the relevant code in the config folder in vue;

First of all, let’s take a look at the file structure of config:

|-config
|---dev.env.js
|---index.js
|---prod.env.js

We can clearly understand when we open our vue project folder You can see three files in the folder, "dev.env.js", "index.js", "prod.env.js". We first open the prod.env.js file and look at the contents:

'use strict'
module.exports = {
 NODE_ENV: '"production"'
}

The content of prod.env.js is very simple. It just exports an object, which states that the execution environment is "production (production environment)"; let's look at the corresponding "dev.env" .js" file:

'use strict'
//引入webpack-merge模块
const merge = require('webpack-merge')
//引入刚才打开的prod.env.js
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"'
})

In "dev.env.js", the webpack-merge module is first introduced. The function of this module is to merge two configuration file objects and generate a new configuration file, which is somewhat similar to es6's object.assign();

vue-cli extracts some common configurations. In one file, configure different codes for different environments, and finally use webpack-merge to merge and reduce duplicate code. As the documentation says, "webpack follows the principle of non-repetition (Don't repeat yourself - DRY). The same code will not be configured in different environments."

Okay, let's go back to the code. After introducing webpack-merge, this file also introduces prod.env.js, and then prod. The configuration of env.js and the new configuration, which indicates the development environment (development), are merged. (I don’t quite understand why this is done. If you write module.exports={NODE_ENV:'"development'} directly without merging, it is also possible. Is it to downgrade gracefully?)

One more thing to note is that development and production must be enclosed in double quotes, otherwise an error will be reported!!!

Finally, let’s look at index.js:

'use strict'
// Template version: 1.2.4
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path')
module.exports = {
 dev: {
 // Paths
 assetsSubDirectory: 'static',
 assetsPublicPath: '/',
 proxyTable: {},
 // Various Dev Server settings
 host: 'localhost', // can be overwritten by process.env.HOST
 port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
 autoOpenBrowser: false,
 errorOverlay: true,
 notifyOnErrors: true,
 poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
 // Use Eslint Loader?
 // If true, your code will be linted during bundling and
 // linting errors and warnings will be shown in the console.
 useEslint: true,
 // If true, eslint errors and warnings will also be shown in the error overlay
 // in the browser.
 showEslintErrorsInOverlay: false,
 /**
  * Source Maps
  */
 // https://webpack.js.org/configuration/devtool/#development
 devtool: 'eval-source-map',
 // If you have problems debugging vue-files in devtools,
 // set this to false - it *may* help
 // https://vue-loader.vuejs.org/en/options.html#cachebusting
 cacheBusting: true,
 // CSS Sourcemaps off by default because relative paths are "buggy"
 // with this option, according to the CSS-Loader README
 // (https://github.com/webpack/css-loader#sourcemaps)
 // In our experience, they generally work as expected,
 // just be aware of this issue when enabling this option.
 cssSourceMap: false,
 },
 build: {
 // Template for index.html
 index: path.resolve(__dirname, '../dist/index.html'),
 // Paths
 assetsRoot: path.resolve(__dirname, '../dist'),
 assetsSubDirectory: 'static',
 assetsPublicPath: '/',
 /**
  * Source Maps
  */
 productionSourceMap: true,
 // https://webpack.js.org/configuration/devtool/#production
 devtool: '#source-map',
 // Gzip off by default as many popular static hosts such as
 // Surge or Netlify already gzip all static assets for you.
 // Before setting to `true`, make sure to:
 // npm install --save-dev compression-webpack-plugin
 productionGzip: false,
 productionGzipExtensions: ['js', 'css'],
 // Run the build command with an extra argument to
 // View the bundle analyzer report after build finishes:
 // `npm run build --report`
 // Set to `true` or `false` to always turn it on or off
 bundleAnalyzerReport: process.env.npm_config_report
 }
}

is introduced at the beginning The path module in node,

Then let’s first look at the configuration content under dev:

assetsSubDirectory refers to the static resource folder, the default is "static",

assetsPublicPath Refers to the publishing path.

proxyTable is where we often configure the proxy API. I believe everyone knows the host and port behind, so I won’t go into details.

Whether autoOpenBrowser is automatically opened Browser

errorOverlay query error

notifyOnErrors notification error
, poll is a configuration related to the devserver. The devserver provided by webpack can monitor file changes, but in some cases But it doesn't work, we can set up a poll (poll) to solve the problem

useEslint whether to use eslint

showEslintErrorsInOverlay to display the error prompt of eslint

devtool webpack provides Configuration to facilitate debugging, it has four modes, you can check the webpack documentation to learn more

cacheBusting A configuration with devtool, when inserting a new hash into the file name to clear the cache, whether to generate souce maps, the default It is true in the development environment, but there is also a sentence in the document: "Turning this off can help with source map debugging." Well...

cssSourceMap Whether to turn on cssSourceMap
Let's look at the build Configuration content:
index The path to index.html after compilation,

path.resolve(__dirname) in path.resolve(__dirname, '../dist') refers to the location where index.js is located Absolute path, then look for the path "../dist" (node-related knowledge),

The file root path after assetsRoot is packaged, as for assetsSubDirectory and assetsPublicPath are the same as in dev,

productionSourceMap Whether to enable source-map,

devtool is the same as dev,

Whether productionGzip is compressed,

productionGzipExtensions The extension of the file that needs to be compressed in gzip mode, it will be changed after setting Compress files with corresponding extensions

bundleAnalyzerReport Whether to turn on the packaged analysis report

Up to this point, the contents of the config folder are basically complete. As the name tells us, this The three files are just hard-coded configuration files. So far, I haven’t encountered too many

. The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

VUE2 implements secondary province and city linkage selection

Using react to implement paging components

How to use SVG in React and Vue projects

Compare the time of the same day through JavaScript

The above is the detailed content of vue-cli configuration file (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!