web-dev-qa-db-fra.com

supprimer console.logs avec Webpack & Uglify

J'essaie de supprimer console.logs avec le plug-in Uglify de Webpack, mais il semble que le plug-in Uglify fourni avec Webpack ne dispose pas de cette option, elle n'est pas mentionnée dans la documentation.

Je suis en train d'initialiser uglify à partir de webpack comme ceci: new webpack.optimize.UglifyJsPlugin()

Si j'ai bien compris, je peux utiliser la librairie autonome Uglify pour obtenir toutes les options, mais je ne sais pas laquelle?

Le problème est que drop_console ne fonctionne pas.

reactjswebpackbabeljsuglifyjs
41
Mladen Petrovic

Avec UglifyJsPlugin, nous pouvons gérer des commentaires, des avertissements, des journaux de consoles , mais il ne serait pas judicieux de les supprimer en mode de développement. Commencez par vérifier si vous utilisez webpack pendant prov env or dev env, Si c'est prod env alors vous pouvez supprimer tous ceux-ci, comme ceci:

var debug = process.env.NODE_ENV !== "production";

plugins: !debug ? [
   new webpack.optimize.UglifyJsPlugin({

     // Eliminate comments
        comments: false,

    // Compression specific options
       compress: {
         // remove warnings
            warnings: false,

         // Drop console statements
            drop_console: true
       },
    })
]
: []

Référence: https://github.com/mishoo/UglifyJS2#compressor-options

UPDATE 2019 Nécessité d’utiliser le plug-in terser maintenant pour la prise en charge de l’ES6 dans Webpack v4 https://github.com/webpack-contrib/terser- webpack-plugin # terseroptions

webpack.config.js 

module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({
        sourceMap: true, // Must be set to true if using source-maps in production
        terserOptions: {
          compress: {
            drop_console: true,
          },
        },
      }),
    ],
  },
};
64
Mayank Shukla

Essayez drop_console :

plugins: [
    new Webpack.optimize.UglifyJsPlugin({
      compress: {
        drop_console: true,
      }
    }
]

Mise à jour: Pour le Webpack v4 cela a un peu changé:

const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

...

optimization: {
  minimizer: [
    new UglifyJSPlugin({
      uglifyOptions: {
        compress: {
          drop_console: true,
        }
      }
    })
  ]
}
40
Dominic

Voici la nouvelle syntaxe pour Webpack v4:

optimization: {
  minimizer: [
    new UglifyJSPlugin({
      uglifyOptions: {
        compress: {
          drop_console: true
        },
        output: {
          comments: false
        }
      },
    }),
  ],
},
8
jesal

Pour uglifyjs-webpack-plugin, encapsulez les options dans un objet uglifyOptions:

    plugins: [
    new UglifyJSPlugin({
        uglifyOptions: {
            compress: {
                drop_console: true
            }
        }
    })
]
6
jhillers

c'est ce que j'ai fait pour supprimer alert () et console.log () de mes codes. global_defs => remplacer les alertes par console.log puis drop_console supprime tous les console.logs et maintenant rien ne s'affiche dans la console de mon navigateur

     new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          global_defs: {
            "@alert": "console.log",
          },
          drop_console: true
        }
      }
    }),

versions du plugin:

"webpack":3.12.0,
"webpack-cli": "^3.0.3",
"uglifyjs-webpack-plugin": "^1.2.5",

À l'heure actuelle, uglifyjs-webpack-plugin v1.2.6 a été publié et j'ai utilisé les dernières documentations pour celui-ci. Je suppose donc qu'il n'y aura pas de problème avec le dernier plugin.

3
molikh

J'ai ajouté une réponse complète pour Webpack v4 avec configuration de débogage

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
var debug = process.env.NODE_ENV !== "production";

.....
optimization: {
        minimizer: !debug ? [
            new UglifyJsPlugin({

                    // Compression specific options
                    uglifyOptions: {
                        // Eliminate comments
                        comments: false,

                        compress: {
                            // remove warnings
                                warnings: false,

                            // Drop console statements
                                drop_console: true
                        },
                    }

                })
            ]
            : []
    }

Mes scripts dans package.json sont comme suit:

"webpackDev": "npm run clean && export NODE_ENV=development && npx webpack",
"webpackProd": "npm run clean && export NODE_ENV=production && npx webpack -p"
3
jarora