Удалить console.logs с помощью Webpack & Uglify

Я пытаюсь удалить console.logs с помощью плагина Webpack Uglify, но похоже, что плагин Uglify, поставляемый в комплекте с Webpack, не имеет такой опции, его не упоминается в документации.

Я инициализирую uglify из webpack следующим образом: new webpack.optimize.UglifyJsPlugin()

Я понимаю, что я могу использовать автономный Uglify lib для получения всех параметров, но я не знаю, какой из них?

Проблема в том, что drop_console не работает.

Ответ 1

С UglifyJsPlugin мы можем обрабатывать комментарии, предупреждения, журналы консоли, но не стоит удалять все это в режиме разработки. Сначала проверьте, используете ли вы webpack для prov env or dev env, если это prod env то вы можете удалить все это, например:

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

Ссылка: https://github.com/mishoo/UglifyJS2#compressor-options

ОБНОВЛЕНИЕ 2019 Теперь нужно использовать плагин terser для поддержки ES6 в 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,
          },
        },
      }),
    ],
  },
};

Ответ 2

Попробуйте drop_console:

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

Обновление: Для веб-пакета v4 оно немного изменилось:

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

...

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

Я лично считаю, что журналы консоли (особенно console.error) очень полезны для prod, и я думаю, что это хорошая идея - хранить их. Если вы действительно хотите отказаться от определенных функций консоли, таких как console.log, вам следует использовать опцию pure_funcs, например, pure_funcs: ['console.log'], и это приведет к падению console.log, поскольку чистые функции не вызывают побочных эффектов, тогда Uglify может отбросить те, которые не назначены ни для чего.

optimization: {
  minimizer: [
    new UglifyJSPlugin({
      uglifyOptions: {
        compress: {
          // Drop only console.logs but leave others
          pure_funcs: ['console.log'],
        },
        mangle: {
          // Note: I'm not certain this is needed.
          reserved: ['console.log']
        }
      }
    })
  ]
}

Для TerserJS (Uglify устарела tbh)

optimization: {
  minimizer: [
    new TerserPlugin({
      terserOptions: {
        compress: {
            drop_console: true
        }
      }
    })
  ]
}

Как уже говорилось, вы также можете использовать pure_funcs альтернативно.

Ответ 3

Это новый синтаксис для Webpack v4:

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

Ответ 4

Для uglifyjs-webpack-plugin параметры обертки внутри объекта uglifyOptions:

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

Ответ 5

Я добавил исчерпывающий ответ для webpack v4 с конфигурацией отладки

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
                        },
                    }

                })
            ]
            : []
    }

Мои скрипты в package.json:

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

Ответ 6

это то, что я сделал для удаления alert() и console.log() из моих кодов. global_defs => заменить оповещения с помощью console.log, затем drop_console удаляет все console.logs, и теперь в моей консоли браузера ничего не отображается

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

версии плагина:

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

Прямо сейчас выпущен uglifyjs-webpack-plugin v1.2.6, и я использовал последние документы для этого, поэтому я полагаю, что с последним плагином тоже не будет проблем.

Ответ 7

Проверьте fooobar.com/questions/17639631/... для применения обновления (с использованием TerserPlugin) принятого ответа здесь для производственной сборки приложения реагирования, созданного через "create-реагировать-приложение"

Ответ 8

Используйте это лучше и работает const UglifyEsPlugin = require ('uglify-es-webpack-plugin')

module.exports = {
plugins: [
        new UglifyEsPlugin({
            compress:{
                drop_console: true
            }
        }),
] 
}