Debugging is always indispensable in development. When it comes to debugging, we may have many console.log prints on the console. We only want to use them conveniently during testing, but we don’t need them in the production environment, but should we delete them one by one? ··· Of course it is not impossible, as long as you are not too tired, hahaha
In fact, we can use the webpage packaging tool to help us filter out the console and debugger, so that we don't have to find and delete them one by one, which is much more convenient.
Here is the packaged file without configuration:
Here is the packaged file after configuration:
Here's how to do it:
1. First, if your cli version is relatively low, you need to download a correspondingly low version, otherwise the following error will be reported:
Here is my package version: "terser-webpack-plugin": "^4.2.3",
Download command: npm install -D [email protected]
2. Then configure in vue-config.js in the project
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
configureWebpack: {
optimization: {
minimizer: [
new TerserPlugin({
terserOptions: {
compress: {
drop_console: true,
drop_debugger: true
}
}
})
]
}
}
}