WebPackを環境毎に記載する方法

目次

はじめに

以下の記事を参考に、DockerとWebPackを使用したプロジェクトを用意してください。
既にプロジェクトがある場合は、適時読み替えてください。

reigle.info

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の定義（本番環境）~~~~~
  };
};