//重定向路径
const path = require('path');
function resolve (dir) {
return path.join(__dirname, dir)
}
module.exports = {
chainWebpack: (config) => {
config.resolve.alias
.set('$css',resolve('/static/css'))
.set('$common',resolve('/components'))
.set('$api',resolve('/api'))
.set('$page',resolve('/pages'))
.set('$js',resolve('/static/js'));
}
};
//删除打印
module.exports = {
chainWebpack: (config) => {
// 发行或运行时启用了压缩时会生效
config.optimization.minimizer('terser').tap((args) => {
const compress = args[0].terserOptions.compress
// 非 App 平台移除 console 代码(包含所有 console 方法,如 log,debug,info...)
compress.drop_console = true
compress.pure_funcs = [
'__f__', // App 平台 vue 移除日志代码
'console.log', // 可移除指定的 console 方法
'console.info', // 可移除指定的 console 方法
]
return args
})
}
};
//简单配置方式1:
//跟webpack的写法一样
module.exports = {
configureWebpack: {
plugins: [
new MyAwesomeWebpackPlugin()
]
}
}
//简单配置方式2:
//函数返回值,里面可以条件判断
//生产环境和运行环境
module.exports = {
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
// 为生产环境修改配置...
console.log("生产环境111")
} else {
// 为开发环境修改配置...
console.log("开发环境222")
}
}
};
链式操作:
可以类比以前webpack设置的方式,这种写法只不过换成链式操作而已。
// vue.config.js
module.exports = {
chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.loader('vue-loader')
.tap(options => { // 设置处理的具体选项
return options
})
config.module
.rule('graphql') // 设置规则名称
.test(/.graphql$/) // 设置筛选文件的规则
.use('graphql-tag/loader') // 使用处理文件的loader
.loader('graphql-tag/loader') // 载入loader对文件进行处理
.end()
// 你还可以再添加一个 loader
.use('other-loader')
.loader('other-loader')
.end()
}
}