webpackで本番用と開発用で設定を分ける

公式の本番環境と開発環境で分けるようのドキュメント
https://webpack.js.org/guides/production/

公式推奨の設定
①webpackにoutputとentryなどを記載した設定ファイルを用意する(webpack.common.js)
②開発環境用の設定ファイル(webpack.dev.js)を用意してwebpack.common.jsをmergeする

webpack.common.js内で開発環境と本番環境でmergeするプラグイン

npm install --save-dev webpack-merge

上記の手段で環境を整えた場合以下のようにpackage.jsonに記述

"scripts": {
    "build": "webpack --config webpack.prod.js",
    "start": "webpack serve --open --config webpack.dev.js"
  },