Vue CLI4.x 配置指南
持续更新中
Version
Vue CLI 测试版本：@vue/cli 4.5.4
Table of content
⚡去掉console.log
// 内置插件不需要安装
const TerserPlugin = require('terser-webpack-plugin')
// 方法一：简单配置
module.exports = {
optimization: {
minimizer: [
new TerserPlugin({
terserOptions: {
compress: {
drop_console: true,
drop_debugger: true,
},
},
sourceMap: false,
})
],
},
};
// 方法二：基于环境有条件地配置
module.exports = {
configureWebpack: (config) => {
if (process.env.NODE_ENV === 'production') {
const plugins = []
plugins.push(
new TerserPlugin({
terserOptions: {
compress: {
drop_console: true,
drop_debugger: true,
},
},
sourceMap: false,
})
)
config.optimization.minimizer = [
...config.optimization.minimizer,
...plugins,
]
}
},
}
⚡添加打包分析
- Install
# NPM
npm install --save-dev webpack-bundle-analyzer
# Yarn
yarn add -D webpack-bundle-analyzer
- Usage
// 方法一：通过configureWebpack选项配置
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
configureWebpack: (config) => {
if (process.env.NODE_ENV === 'production') {
const plugins = []
plugins.push(
new BundleAnalyzerPlugin()
)
config.plugins = [
...config.plugins,
...plugins,
]
}
},
}
- Reference