vue.config.js配置之configureWebpack（两种用法）

vue.config.js配置之configureWebpack（两种用法）:https://wenku.baidu.com/view/018293ca49fe04a1b0717fd5360cba1aa8118ca4.html

vue.config.js配置之configureWebpack（两种⽤法）
vue.config.js是vue-cli3之后新增的⼀个功能，再这个版本⾥⾯如果要配置webpack相关的属性，就需要⾃⼰在项⽬根⽬录新建
vue.config.js这个⽂件，然后在该⽂件⾥⾯去写⼊你需要的配置等等。
vue.config.js的具体配置参数可以参照vue-cli⽂档地址：
在配置的过程中遇到⼀个属性，configureWebpack，先来看看⽂档说明：
configureWebpack
Type: Object | Function
如果这个值是⼀个对象，则会通过 合并到最终的配置中。
如果这个值是⼀个函数，则会接收被解析的配置作为参数。该函数及可以修改配置并不返回任何东西，也可以返回⼀个被克隆或合并过
的配置版本。
这个属性特别之处就是，他有两种类型形态，但是⼜不能重复使⽤，⽽在某些情况既需要对象类型的配置，也需要函数类型的配置，查找⽂
档半天，终于找到了解决⽅案：
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的调试信息，第⼆个就是修改打包静态资源⽂件⼤⼩设置的配置
--------------------------------------------------------
作者：MDYmcn1985
链接：https://wenku.baidu.com/view/018293ca49fe04a1b0717fd5360cba1aa8118ca4.html
来源：百度文库
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

标签：vue,console,configureWebpack,配置,js,config
来源： https://www.cnblogs.com/bydzhangxiaowei/p/16425489.html