はじめに

以下の記事を参考に、DockerとWebPackを使用したプロジェクトを用意してください。

既にプロジェクトがある場合は、適時読み替えてください。

https://reigle.info/entry/2022/07/12/100000

package.jsonで環境を定義する

「webpack-dev-server」の前に環境情報を保持する定数を定義します。

以下では、「ENV」の定数に「development」と「production」を設定しています。

"scripts": {
    "start": "ENV=development webpack-dev-server --config webpack.config.js --port 3000 --progress --profile --static src/",
    "production": "ENV=production webpack-dev-server --config webpack.config.js --port 3000 --progress --profile --static src/",
  },

WebPackの修正

修正前は以下のような「webpack.config.js」の定義でした。

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { LoaderOptionsPlugin } = require("webpack");

module.exports = () => {
  return {
    ~~~~~WebPackの定義~~~~~
  }
}

「webpack.config.js」を以下のように修正してください。

※ポイントとしては、「webpack-merge」を使用して、別ファイルをマージしています。

const path = require("path");
const webpackMerge = require("webpack-merge");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { LoaderOptionsPlugin } = require("webpack");
const environment = process.env.ENV || "development";

module.exports = () => {
  return webpackMerge.merge(require("./" + environment + ".js")(environment), {
    ~~~~~WebPackの定義（共通の部分）~~~~~
  }
}

「webpack.config.js」と同じ階層に「development.js」「production.js」を作成し、それぞれ以下のように記載します。

「development.js」の記載

const webpack = require("webpack");

module.exports = (env) => {
  return {
    ~~~~~WebPackの定義（開発環境）~~~~~
  };
};

「production.js」の記載

const webpack = require("webpack");

module.exports = (env) => {
  return {
    ~~~~~WebPackの定義（本番環境）~~~~~
  };
};