Javascriptでデバッグライトを製品版で取り忘れないように

やっていることはありきたりですが、逆引きとしてお役に立てば

方式

• webpackの設定ファイルを開発版と製品版で分ける。
• DefinePluginで定義したGlobal constantでデバッグライトのコードを生かすかどうかを決定する。

なお、使用したwebpackは4.41.2です。

デバッグライトのコード

例えば、develop.jsなどとして、以下のようなデバッグライトのコードを記載しておきます。

export {debug_msg};

function debug_msg(msg) {
    if (DEBUG) {
        console.log(msg);
    } 
}

webpackの設定ファイル

開発版のコードと製品版のコードのビルドは、シンプルに以下のコマンドで行うことにしました。使用する設定ファイルの指定を変えているだけです。

（開発版）
.node_modules/.bin/webpack —-config webpack.dev.js

（製品版）
.node_modules/.bin/webpack —-config webpack.prod.js

設定ファイルは以下のように記載します。開発版と製品版での違いはmodeと、DEBUGがtrueかfalseかだけです。

（開発版:webpack.dev.js）

var webpack = require('webpack');

module.exports = {
    mode: 'development',
    entry: "./src/index.js",
    output: {
        filename: "bundle.js",
        path: __dirname + "/dist"
    },
    plugins: [
        new webpack.DefinePlugin({
            DEBUG: JSON.stringify(true)
        })
    ]
}

（製品版:webpack.prod.js）

var webpack = require('webpack');

module.exports = {
    mode: 'production',
    entry: "./src/index.js",
    output: {
        filename: "bundle.js",
        path: __dirname + "/dist"
    },
    plugins: [
        new webpack.DefinePlugin({
            DEBUG: JSON.stringify(false)
        })
    ]
}

これで、develop.jsのDEBUGがtrueまたはfalseに置換されます。
さらに、minificationにより、不要なコードが削除されるため、製品版のdebug_msgは中身が空になる（らしい）です。