I have been studying webpack recently, and suddenly I want to see how webpack is configured in vue-cli. I have read a lot of related articles, so I have come up with a few articles about vue-cli configuration. As the saying goes, "If you want to do a good job, you must first sharpen your tools." This article mainly analyzes the relevant code in vue about the config folder;
First, let’s take a look at the file structure of config:
|-config |--- |--- |---
Open our vue project folder and we can clearly see the three files in the folder, "", "", ", ", and we open the files first and see the contents inside:
'use strict'
= {
NODE_ENV: '"production"'
}
The content is very simple. It just exports an object, which states that the execution environment is "production environment"; let's look at the corresponding "" file:
'use strict'
//Introduce webpack-merge moduleconst merge = require('webpack-merge')
//Introduce what just openedconst prodEnv = require('./')
= merge(prodEnv, {
NODE_ENV: '"development"'
})
In "", 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 a bit similar to es6's();
Vue-cli extracts some common configurations and places them in a file. Configure different codes for different environments. Finally, use webpack-merge to merge to reduce duplicate code. As the document says, "webpack follows the principle of non-repeat yourself - DRY and will no longer configure the same code in different environments."
Of course, there is much more to this about webpack-merge. If you want to know more about this module, please visit/package/webpack-merge
OK, let's go back to the code. After introducing webpack-merge, this file is introduced again. Then we will merge the configuration and new configuration, namely, the development environment (development). (I don't understand why I should do this, if I don't merge, I will write it directly={NODE_ENV:'"development'}That's OK, is it for elegance downgrading? )
Another thing to note is that development and production must be double quoted, otherwise an error will be reported! ! !
Finally, let's look at:
'use strict'
// Template version: 1.2.4
// see /webpack for documentation.
const path = require('path')
= {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
// Various Dev Server settings
host: 'localhost', // can be overwritten by
port: 8080, // can be overwritten by , if port is in use, a free one will be determined
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // /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
*/
// /configuration/devtool/#development
devtool: 'eval-source-map',
// If you have problems debugging vue-files in devtools,
// set this to false - it *may* help
// /en/#cachebusting
cacheBusting: true,
// CSS Sourcemaps off by default because relative paths are "buggy"
// with this option, according to the CSS-Loader README
// (/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: (__dirname, '../dist/'),
// Paths
assetsRoot: (__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
/**
* Source Maps
*/
productionSourceMap: true,
// /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: .npm_config_report
}
}
The path module in node is introduced at the beginning.
Then let's look at the configuration content under dev:
assetsSubDirectory refers to static resource folders, default "static",
assetsPublicPath refers to the publishing path.
proxyTable is a place we often use to configure proxy APIs. I believe everyone knows the host and ports below, so I won't go into details.
Does autoOpenBrowser automatically open the browser
errorOverlay query error
notifyOnErrors notification error
, poll is a configuration related to devserver. The devserver provided by webpack can monitor file changes, but in some cases it cannot work. We can set up a poll to solve the problem.
Whether to useEslint
showEslintErrorsInOverlay displays eslint error message
Devtool webpack provides configurations for easy debugging. It has four modes. You can check the webpack documentation for more information.
cacheBusting A configuration that cooperates with devtool. When inserting a new hash to the file name, it causes clear whether the souce maps to be generated when the cache is clear. It is true in the development environment by default. However, there is also a sentence in the document: "Turning this off can help with source map debugging." Uh. . .
cssSourceMap Whether to enable cssSourceMap
Let's look at the configuration content under build:
The path after index compiled, in (__dirname, '../dist')
(__dirname) refers to the absolute path where it is located, and then look for the path "../dist" (node-related knowledge).
The root path of the file packaged by assetsRoot. As for assetsSubDirectory and assetsPublicPath, it is the same as in dev.
Whether to enable source-map for productionSourceMap,
devtool and dev,
Whether productionGzip is compressed,
productionGzipExtensions The extension of the file that needs to be compressed in gzip mode will be compressed after setting the file with the corresponding extension.
bundleAnalyzerReport Whether to enable packaging analysis report
As of this point, the contents under the config folder have basically been completed. As the name tells us, these three files are just dead configuration files, and so far have not encountered many.
Summarize
The above is the vue-cli configuration file - config article introduced by the editor to you. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!