//写法一
module.exports = {}
//写法二(可以获得更好的类型提示)
const {defineConfig} = require("@vue/cli-serve")
module.exports = defineConfig({
    //publicPath:部署应用包时的基本URL，可以设置为空字符串或者相对路径，这样所有的资源都会被链接为相对路径
    //可以如下使用来配置不同环境下基础URL
    publicPath:process.env.NODE_ENV === "production" ? "/production-sub-path/" : "/"
    //outputDir:当运行vue-cli-service build时生成的生产环境构建文件的目录，注意目标目录的内容在构建之前会被清除
    //assetsDir:放置生成的静态资源
    //indexPath:指定生成的index.html的输出路径，相对于outputDir，也可以是一个绝对路径
    //filenameHashing:默认情况下生成的静态资源在它们的文件名中包含了hash以便更好地控制缓存，然而这也要求index的HTML是被vue-cli自动生成的，如果不是可以通过false来关闭文件名哈希。
    //lintOnSave:是否在开发环境下通过eslint-loader在每次保存时lint代码，这个值会在@vue/cli-plugin-eslint被安装后生效
    //runtimeCompiler:是否使用包含运行时编译器的vue构建版本，设置为true后可以在vue组件中使用templete选项
    //transplieDependencies:默认情况下babel-loader会忽略所有node_modules中的文件，启用该选项可以避免构建后的代码中出现未转译的第三方依赖
    //productionSourceMap:如果不需要生产环境的sourcemap，可以将其设置为false以加速生产环境构建
    //configWebpack:如果这个值是一个对象，会通过webpack-merge合并到最终的配置中，如果是函数则会接收被解析的配置作为参数，该函数既可以修改配置并不返回任何东西也可以返回一个被克隆或合并过的配置版本（下面单独说）
    //chainWebpack:是一个函数，会接收一个基于webpack-chain的实例，允许对内部的webpack配置进行更细粒度的修改（下面细说）
    //css.requireModuleExtension:默认情况下只有module结尾的文件才会被当做CSSmodules，设置为false之后你就课可以去掉文件名中的module并将所有的`css、scss、sass、less、stylus`文件视为才cssmodules
    //css.extract:是否将组件中的css提取到一个独立的css文件中，默认开发环境下是true，生产环境下是false
    //css.suorceMap:是否为css开启source.map，设置为true之后可能会影响构建的性能
    //css.loaderOptions:向css相关的loader传递选项，支持的loader：css-loader/postcss-loader/sass-loader/less-loader/stylus-loader,如下:
    css:{
    	loaderOptions:{
			css:{
				//这里的选项会传递到css-loader
			},
             postcss:{
				//这里选项会传递给postcss-loader
             }                
		}
	}
    //devServer:热更新
    	//devServerProxy:如果前端应用和后端服务器没有运行在同一个主机上需要在开发环境下将API请求代理到API服务器
    	//parallel:是否为babel或ts使用thread-loader，该选项在系统的CPU有多于一个内核时自动启用，仅作用域生产构建
    	//pwa:向pwa插件传递选项
    	//pluginOptions:用来传递任何第三方插件选项
    devServer:{
		proxy:{
			'/api':{
				target:'<url>',
                  ws:true,
                  changeOrigin:true      
            }
        }
    }
    	
})

configureWebpack：最简单的配置就是在该选项里面提供一个对象，如果你需要基于环境条件有条件的配置行为，或者想要直接修改配置就可以换成一个函数。该函数的第一个参数会收到已经解析好的配置 ，你可以直接修改配置，或者返回一个将被合并的对象：

module.exports = {
    configureWebpack:config => {
		if(process.env.NODE_ENV === "production"){
			//为生产环境修改配置
        }else{
			//为开发环境修改配置
        }
    }
}

链式操作（高级）：vue-cli内部配置是通过webpack-chain维护的，这个库提供了一个webpack原始配置的上层抽象使其可以定义具名的loader规则和具名插件，并有机会在后期进入 这些规则并对它们的选项进行修改。

//修改loader选项
module.exports = {
    chainWebpack:config => {
		config.module
        .rule("vue")
        .use("vue-loader")
        .tap(options => {
			//修改它的选项
            return options
        })
    }
}
//添加一个新的loader
module.exports = {
    chainWebpack:config => {
		config.module
        .rule("graphql")
        .test(/\.graphql$/)
        .use("graphql-tag/loader")
        	.loader("graphql-tag/loader")
        	.end()
    }
}
//替换一个规则里的loader
module.exports = {
	chainWebpack:config => {
		const svgRule = config.module.rule("svg")
        //清除已有的所有loader
        svgRule.uses.clear()
        //添加要替换的loader
        svgRule
        .use("vue-svg-loader")
        	.loader("vue-svg-loader")
    }
}
//修改插件选项
module.exports = {
	chainWebpack:config => {
		config
        .plugin("html")
        .tap(args => {
            return [传递给html-webpack-plugin构造函数的新参数]
        })
    }
}