分享两种vue.config配置webpack插件的方法
vue.config.js中通过设置configureWebpack来配置webpack插件,configureWebpack有两种形式,一种是对象形式,一种是函数的形式,并且都对生产环境和开发环境做了判断。
·
vue.config.js中通过设置configureWebpack来配置webpack插件,configureWebpack有两种形式,一种是对象形式,一种是函数的形式,并且都对生产环境和开发环境做了判断。
下边分别对两种方式做两个示例。示例中删除了多余的插件配置。
对象形式
module.exports = {
// 对象的形式配置configureWebpack
configureWebpack: {
name: 'xxx',
resolve: {
alias: {
'@': path.resolve(__dirname, 'src')
}
},
plugins: process.env.NODE_ENV === 'production' ? [
// 去除console.log
new UglifyPlugin(),
// 代码压缩
new CompressionPlugin()
] : []
},
};
函数形式
module.exports = {
// 函数的形式配置configureWebpack
configureWebpack: (config) => {
config.name = 'xxx'
config.resolve = {
...config.resolve,
alias: {
'@': path.resolve(__dirname, 'src'),
}
}
// 对生产环境的配置
if (process.env.NODE_ENV === 'production') {
const plugns = [
// 去除console.log
new UglifyPlugin(),
// 代码压缩
new CompressionPlugin()
]
config.plugins.push(...plugns)
}
},
};
更多推荐
已为社区贡献2条内容
所有评论(0)