Equivalent to the previous webpack packaging tool
Configuration directory:
const path = require('path');
function resolve(dir) {
return (__dirname, dir)
}
= {
productionSourceMap: false,// Whether to generate sourceMap in the production environment
publicPath: './', // Basic URL when deploying application packages
outputDir: 'dist', // File directory output during packaging
assetsDir: 'assets', // Place static folder directory
devServer:{},// In the dev environment, webpack-dev-server related configuration
lintOnSave: false,//Whether eslint verification is enabled every time you save the code in the development environment
css:{},// CSS processing
chainWebpack：config=>{} //vue-cli internal webpack configuration
pluginOptions:{},// Can be used to pass any third-party plugin option
}1. productionSourceMap
① productionSourceMap ：false;
Function: Set productionSourceMap to false, which can not only reduce the package size, but also encrypt the source code. This way, the files are small after packaging and others can no longer see your source code.
②productionSourceMap ：true;
Function: After the project is packaged, the code is compressed and encrypted. If an error is reported at runtime, the output error message cannot be accurately known where the code reported an error. With map, you can just like unencrypted code, and the exact output is what the row and column are wrong.
2. publicPath
When packaging the project, if we set it to "/", then after packaging, we will be in the dist directory by default. Suppose we set it to "/app", an app directory will be generated in the dist directory we packaged. The packaged resource files are all in the app directory. All static resources will not be found, so we usually set it to "/".
3. outputDir
For example, if the file directory output when the project is packaged is set to "dist", then the directory name after package is "dist", we set to "build", and the directory name after package is "build".
4. AssetDir
We place the directory of static resources. When the project is first created, the default is asset, so we generally don't move and directly configure assetDir:"assets". Of course, if you are not used to it, you can also change it to the name you want. You only need to change the directory name to the corresponding name. For example, if you are used to using static and the directory name is static, then you can write assetsDir:"static" here.
V. devServer
In the dev environment, the relevant configuration of webpck-dev-server
devServer：{
port : 8080, //Ports during development environment runtime
https:false,// Whether to enable HTTPS protocol
open:true, //Will the browser be opened directly after the project runs successfully
hot:true,//Whether to turn on hot load
overlay：true,//When a compilation error or warning occurs, full screen overwrite is displayed in the browser.
proxy: { //Server Agent
'/api': {
target: "api-url", // The API address for the actual cross-domain request secure: false, // https request uses true ws: true,
changeOrigin: true, // Cross-domain // Request address rewrite http://front-end/api/login ⇒ http://api-url/login pathRewrite: {
'^/api': '/',
}
},
}6. lintOnSave
Front-end programmers have a common problem. Every time they finish writing a little code, even if they write a word or define a variable, they will habitually format the code and save the code. This configuration is whether we need to check the code through esLint every time we save the code. Because I am not used to using esLint, I have not learned too much. If there is eslint in the project, I don’t want to be checked, so I can use it. If not, I don’t need to write this configuration.
7. CSS processing
css:{
loaderOptions：{
less:{},
scss:{},
css:{}
}
}
①The function of loaderOptions: pass options to webpack's preprocessor loader. Share global variables
②less configuration
less: {
data:"@import "@/assets/styles/" // Inject less file into the global, you can use it directly in the global }
③Scss configuration
scss: {
prependData: `@import "@/assets/styles/";`//Global injection of scss file, you can write scss code inside the file }
④
css: {
prependData: `@import "@/assets/styles/";`//Global injection of scss file, you can write css code inside the file }
8. chainWebpack
The CLI internal webpack configuration will be merged into the final webpack configuration by webpack-merge. There are two ways to write it. The forms of functions and objects, here only introduces the function forms I commonly use.
chainWebpack：config=>{
const types = ['vue-modules', 'vue', 'normal-modules', 'normal'];
('@', resolve('src'))//Configure the src alias as @}
There are many basic configurations, which are also my most commonly used configurations. You can use them as a reference.
This is the article about the most complete configuration tutorial of vue2. For more related configuration content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!