Remove console.logs with Webpack & Uglify

by

With UglifyJsPlugin we can handle comments, warnings, console logs but it will not be a good idea to remove all these in development mode. First check whether you are running webpack for prod env or dev env, if it is prod env then you can remove all these, like this:

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
       },
    })
]
: []

Reference: https://github.com/mishoo/UglifyJS2#compressor-options

UPDATE 2019
Need to use terser plugin now for ES6 support in webpack v4
https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions

webpack.config.js

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

More Related Contents:

  1. Support for the experimental syntax ‘classProperties’ isn’t currently enabled
  2. Preset files are not allowed to export objects
  3. Dynamically import images from a directory using webpack
  4. Why am I getting ReferenceError: self is not defined when I import a client-side library?
  5. babel-loader jsx SyntaxError: Unexpected token [duplicate]
  6. Error: ‘node-sass’ version 5.0.0 is incompatible with ^4.0.0
  7. How to resolve “Cannot use import statement outside a module” in jest
  8. Dynamically Add Images React Webpack
  9. Differences between creating a new class to using export const
  10. How to import and export components using React + ES6 + webpack?
  11. Typescript react – Could not find a declaration file for module ”react-materialize’. ‘path/to/module-name.js’ implicitly has an any type
  12. How to tell webpack dev server to serve index.html for any route
  13. IMAGE: You may need an appropriate loader to handle this file type
  14. React Js require ‘fs’
  15. How to use Google fonts in React.js?
  16. Importing CSS files in Isomorphic React Components
  17. Requires Babel “7.0.0-0” but was loaded with “6.26.3”
  18. Value of “this” is incorrect when debugging Babel transpiled React with Chrome Devtools
  19. webpack can’t find module if file named jsx
  20. How should I configure create-react-app to serve app from subdirectory?
  21. How to hash CSS class names in Nextjs?
  22. How to resolve “Cannot use import statement outside a module” from Jest when running tests?
  23. Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema
  24. How to minimize the size of webpack’s bundle?
  25. combine react build output into single js file
  26. How to set build .env variables when running create-react-app build script?
  27. Create-React-App build – “Uncaught SyntaxError: Unexpected token
  28. How to bundle a React app to a subdirectory on a server?
  29. import a module from node_modules with babel but failed
  30. jest: Test suite failed to run, SyntaxError: Unexpected token import

Leave a Comment