vue.config.js配置之configureWebpack(两种用法)

vue.config.js是vue-cli3之后新增的一个功能，再这个版本里面如果要配置webpack相关的属性，就需要自己在项目根目录新建vue.config.js这个文件，然后在该文件里面去写入你需要的配置等等。

vue.config.js的具体配置参数可以参照vue-cli文档地址：vue.config.js配置

在配置的过程中遇到一个属性，configureWebpack，先来看看文档说明：

configureWebpack

• Type: Object | Function

  如果这个值是一个对象，则会通过 webpack-merge 合并到最终的配置中。

  如果这个值是一个函数，则会接收被解析的配置作为参数。该函数及可以修改配置并不返回任何东西，也可以返回一个被克隆或合并过的配置版本。

这个属性特别之处就是，他有两种类型形态，但是又不能重复使用，而在某些情况既需要对象类型的配置，也需要函数类型的配置，查找文档半天，终于找到了解决方案：

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
	publicPath: './',//根路径 cli3.0以上使用publicPath
    //assetsDir:'assets',//静态资源目录(js,css,img,fonts)这些文件都可以写里面
    outputDir:'dist',//打包的时候生成的一个文件名
	lintOnSave:false,//是否开启eslint保存检测 ,它的有效值为 true || false || 'error'\
	configureWebpack: config => {
        if (process.env.NODE_ENV === "production") {
            // 为生产环境修改配置...
            config.mode = "production";
            // 这里修改下 
			config.optimization.minimizer = [
				new UglifyJsPlugin({
					uglifyOptions: {
						compress: {
							warnings: false,
							drop_console: true, //console
							drop_debugger: true,
							pure_funcs: ['console.log'] //移除console
						}
					}
				})
			]
			//打包文件大小配置
			config["performance"] = {
				"maxEntrypointSize":10000000,
				"maxAssetSize":30000000
			}
        } else {
            // 为开发环境修改配置...
            config.mode = "development";
        }
 	}
 }

上面是统一使用configureWebpack的函数模式，然后函数模式里面默认会有一个config参数，需要增加或者修改configureWebpack对应的参数，就直接使用config去修改就可以了！

我这里使用了两个功能，第一个是打包build的时候去掉console的调试信息，第二个就是修改打包静态资源文件大小设置的配置