web-dev-qa-db-ja.com

WebpackとUglifyでconsole.logsを削除します

WebpackのUglifyプラグインでconsole.logsを削除しようとしていますが、WebpackにバンドルされているUglifyプラグインにはそのオプションがなく、ドキュメントには記載されていません。

次のようにwebpackからuglifyを初期化しています：new webpack.optimize.UglifyJsPlugin()

私の理解では、スタンドアロンのUglify libを使用してすべてのオプションを取得できますが、どれがわからないのですか？

問題は、drop_consoleが機能していないことです。

reactjswebpackbabeljsuglifyjs
41
Mladen Petrovic

UglifyJsPluginを使用すると、コメント、警告、コンソールログを処理できますが、開発モードでこれらすべてを削除することはお勧めできません。最初にprov env or dev envに対してwebpackを実行しているかどうかを確認し、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

UPDATE 2019webpack v4でES6をサポートするには、terserプラグインを使用する必要があります 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

drop_console を試してください：

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

更新：webpackv4の場合、少し変更されました：

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

...

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

これは、Webpack v4の新しい構文です。

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

Uglifyjs-webpack-pluginの場合、オプションをuglifyOptionsオブジェクト内にラップします。

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

これは、コードから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がリリースされており、このドキュメントには最新のドキュメントを使用しているため、最新のプラグインでも問題はないと思われます。

3
molikh

デバッグ構成で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"
3
jarora