背景

webpackの設定をproduction, development等に分けて管理したい場合、webpackのガイドにはwebpack.common.js, webpack.prod.js, webpack.dev.jsに分ける方法が書かれている。この方法では、常に編集対象以外のファイルの記述内容も意識する必要があり、管理も煩雑になりやすい。
そこで、webpack-config-utilsを導入して、一つのwebpack.config.jsにproductionとdevelopmentの両モードを定義をする。

概要

webpack-config-utilsによって、webpack.config.js内でifProductionやifDevelopment等によるモード毎の値の切り替えが可能になる
モード定義の違いから発生する配列要素数による問題はremoveEmptyによって回避する
production/developmentはNODE_ENVで切り替える
- 例: $ NODE_ENV=production node run build
webpackのconfigの基礎については参考URLを参照ください。

インストール

npmでlocalにインストール

$ npm install --save-dev webpack-config-utils

webpack.config.jsでの定義

webpack-config-utilsで定義されているifProduction, ifDevelopment等のAPIを使って、モード毎の定義を記述する

webpack.config.jsのサンプル

webpack.config.js

const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { getIfUtils, removeEmpty } = require('webpack-config-utils')
const path = require('path')

const { ifProduction, ifDevelopment } = getIfUtils(process.env.NODE_ENV)

module.exports = {
  mode: ifProduction('production', 'development'),　// NODE_ENV=productionの時は'production'、それ以外では'development'が返る
  entry: './src/index.js',
  plugins: removeEmpty([ // 配列要素数による問題を回避（この例では不要）
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      title: ifProduction('Production', 'Development')　// productionとそれ以外でtitleを切り替える
    }),
    ifDevelopment(new webpack.HotModuleReplacementPlugin())// developmentモードでは、HMRを有効にする
  ])
}

package.jsonでの定義

$ npm runから呼び出すスクリプトに、NODE_ENVを指定する。

サンプル

package.json

  "scripts": {
    "start": "NODE_ENV=development webpack-dev-server",
    "build": "NODE_ENV=production webpack --config webpack.config.js"
  },

実行

上記のサンプルでは、$ npm run startでdevelopmentモードでDevServerの起動、$ npm run buildでproductionモードでビルドが実行される。

$ npm run start

> package-name@1.0.0 start /path/to/project
> NODE_ENV=development webpack-dev-server
...

$ npm run build

> package-name@1.0.0 build:prod /path/to/project
> NODE_ENV=production webpack --config webpack.config.js
...

参考URL