preface

Speaking of console. Log debugging, needless to say, it is very easy to use, development to help us solve a lot of bugs. We often see this mess of Console debugging in a development environment. But a production environment would never allow a console message code to appear. Are you still manually one by one delete, that much tired ah!

Let’s take a look at some of the ways to clean up useless production console code.

Basic operation

Webpack configuration

uglifyjs-webpack-plugin

We can look at the introduction of the plug-in, which is used to reduce the js code volume of our code. And the node version is v6.9.0+ and the Webpack version is V4.0.0 + if the plug-in is installed and running.

Uglifyjs-webpack-plugin

The installation

npm i uglifyjs-webpack-plugin
Copy the code

use

Perform the following configuration in the webpack.config.js file.

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
	/ / to omit...
    mode: "production".optimization: {
        minimizer: [
          new UglifyJsPlugin({
            uglifyOptions: {
              // Delete comments
              output: {comments: false
              },
              compress: {
                drop_console: true.// Delete all modes with console
                drop_debugger: true.pure_funcs: ['console.log'] / / remove the console log}}})Copy the code

After configuring the above code, restart to see the effect. Note: The code will only work in the production environment. See our configuration mode: production above. Drop_console is a debug method that removes all prefixes with console, and pure_funcs is a debug method that removes all prefixes with console. Delete console.log, console.table, and console.dir if they contain the console prefix. For example, pure_funcs: [console.log, console.dir] then only those two items will be deleted, and the console.table code in the code will not be deleted.

In production, the console debug code can be cleared, but there is one problem: the plugin only supports ES5 syntax, so if you use ES6 syntax in your code, an error will be reported.

terser-webpack-plugin

This plugin, like the uglifyjs-webpack-plugin above, is used to reduce the js code volume of our code.

If your Webpack version is larger than 5+, you don’t need to install the Terser-Webpack-Plugin. The Terser-Webpack-Plugin comes with it. If your Webpack version is still 4, you need to install the terser-Webpack-Plugin4 version

The installation

npm i terser-webpack-plugin@4
Copy the code

use

const TerserWebpackPlugin = require("terser-webpack-plugin");

module.exports = {
    / / to omit...
    mode: "production".optimization: {
    	minimizer: [
      	    new TerserWebpackPlugin({
                terserOptions: {
                  compress: {
                    warnings: true.drop_console: true.drop_debugger: true.pure_funcs: ['console.log'."console.table"] / / remove the console}}}); ] }}Copy the code

The functionality of the plug-in is the same as above, the use of properties is the same, and only the plug-in can support ES6 syntax. All code takes effect in production environment.

Vue – cli configuration

This is the recommended clean console plug-in for the Vue-CLI project. See babel-plugin-transform-remove-console here for more information

The installation

npm i babel-plugin-transform-remove-console --save-dev
Copy the code

use

In the project root directory babel.config.js file. The plugin does not distinguish between production and development environments, as long as you configure it.

module.exports = {
	plugins: [
		"transform-remove-console"]}// The production environment is configured as follows

const prodPlugins = []
if (process.env.NODE_ENV === 'production') {
	prodPlugins.push('transform-remove-console')}module.exports = {
	plugins: [
		...prodPlugins
	]
}
Copy the code

Simple delete

Next this but a SAO operation, stare big eyes, ha ha ha. Override the console.log method directly.

console.log = function () {};
Copy the code

Use VScode editor flexibly

use

Direct global search of the project console.log re matches, and then replace all empty.

console\.log\(.*? \)Copy the code

Manual Loader deletes the console

Let’s write a simple version of the clear Console plug-in.

Create a new js file. I’ll call it clearConsole.js here, but it’s also using the re to match and replace it with null. If you don’t understand Loader, you can read my article and write a Sass-loader.

clearConsole.js

const reg = /(console.log\()(.*)(\))/g;
module.exports = function(source) {
    source = source.replace(reg, "")
    return source;
}
Copy the code

The Vue. Config. Js configuration

module.exports = {
    / / to omit...
    configureWebpack: {
        module: {
            rules: [{test: /\.vue$/,
                    exclude: /node_modules/,
                    loader: path.resolve(__dirname, "./clearConsole.js")}, {test: /\.js$/,
                    exclude: /node_modules/,
                    loader: path.resolve(__dirname, "./clearConsole.js")}],}},}Copy the code

Delete console.log from js file and vue file. Exclude indicates that the node_module directory is not searched.

Thanks for watching, helpful can pay attention to the public number: front end entertainment

Thank you

Thank you for reading this article. I hope it helps you. If you have any questions, please correct me.

✿ Theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus

Interested partners can join [front end entertainment circle exchange group] welcome everyone to exchange and discuss

Writing is not easy, “like” + “watching” + “retweet” thanks for supporting ❤

Phase to recommend

How to configure JSX

Share 15 useful Webpack plugins!!

How to write a Vue component and publish it to NPM

Sharing 12 Common Webpack Loaders

What are CommonJs and Es Modules and how they differ?

Do you know all these JavaScript Tricks for work?

【 Suggestions 】 Share some Git commands commonly used in work and how to solve special problems