Webpackで環境ごとにLoggerのLogLevelを設定

Webpackを使って環境ごとにJSをビルドする際、環境変数 NODE_ENV を参照してLoggerのLogLevelを変更する。

Webpackバージョン: 3.0.0

Loggerライブラリは loglevel を使用します。
https://github.com/pimterry/loglevel

webpack.config.js

plugins: [
  new webpack.DefinePlugin({
    'process.env': {
      NODE_ENV: `"${process.env.NODE_ENV}"`
    }
  })
]

package.json

"scripts": {
  "development": "NODE_ENV=development webpack --color --progress",
  "production": "NODE_ENV=production webpack --color --progress"
}

NODE_ENVを参照して development と production でLogLevelを変更。
development の場合に log.debug, log.info, log.warn, log.error を表示、
production の場合に log.error のみ表示されるよう設定します。

フロントのJS

import log from 'loglevel';

if (process.env.NODE_ENV === 'development') {
  log.setLevel(log.levels.DEBUG);
} else {
  log.setLevel(log.levels.ERROR);
}

ビルド実行
$ npm run development
$ npm run production