Webpack 4 で複数の.envファイルを切り替える

【レポジトリ】

templateとして使ってください。そして何かあればコメント下さい。フォークしてプルリク作ってくれるとありがたいです。

• JavaScriptバージョン

astatsuya/typescript-boilerplate

• TypeScriptバージョン

astatsuya/vanilla-javascript-boilerplate

【関連記事】

• Webpack4でMPAの開発環境構築。HTML, SCSS, JavaScript, TypeScript
• この記事 Webpack 4 で複数の.envファイルを切り替える
• Webpack 4で複数のHTMLファイル事にJS, SCSSをバンドルする
• Webpack 4, eslint, prettier, vscodeの設定(2020年5月)
• Webpack 4におけるbabelの設定(2020年5月)

複数のenvファイルを切り替え方

dotenv-webpackを使用する。プロパティでpathを指定すると、読み込むファイルを変えられるので、それを利用する。

また、webpackではnpm scriptに --env.file=development の様に記載すると、 webpack.config.js の引数にその値を渡すことが出来る。

• webpack configファイル→ローカル開発用とビルド用の2種類用意する
• .envファイル→必要な分だけ用意し、npm script の --env から引数としてwebpack configに渡し、切り替える

これでAPIが開発用、本番用別で用意している場合などに、柔軟に環境を切り替えられる。

// package.json
"scripts": {
    "eslint": "eslint --fix 'src/**/*.ts'",
    "stylelint": "stylelint --fix 'src/**/*.scss'",
    "format": "npm run eslint && npm run stylelint",
    "typecheck": "tsc -w",
    "json-server": "npx json-server --watch mockDB.json",
    "webpack-dev": "npx webpack --evn.file=development --config webpack.dev.js",
    "webpack-server": "npx webpack-dev-server --env.file=development --config webpack.dev.js",
    "dev": "npm run json-server & npm run webpack-server",
    "build:development": "npx webpack --env.file=development --config webpack.prod.js",
    "build:staging": "npx webpack --env.file=staging --config webpack.prod.js",
    "build:production": "npx webpack --env.file=production --config webpack.prod.js"
  },

webpack-mergeを使っているので少しわかりにくいが、 webpack.dev.js もしくはwebpack.prod.js の引数に--env の値が渡される。そこで文字列として変数に代入し、 webpack.common.js に渡している。

// webpack.dev.js
module.exports = (env) => {
  // package.jsonのscriptで --env.envFile=で指定されたパスのenvFileを使用する。
  // 指定されていない場合は.env.developmentを使用する
  const envFilePath = env ? `./env/.env.${env.file}` : './env/.env.development';
 ...
  return webpackMerge(
    commonConfig({ outputFile, assetFile, envFilePath, assetPath }),
    {

そしてその値を webpack.common.js で参照するenvfileのパスを指定している。

// webpack.common.js
const path = require('path');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const Dotenv = require('dotenv-webpack');
module.exports = ({ outputFile, assetFile, envFilePath, assetPath }) => {
  return {
    ...
    plugins: [
      // 型チェック
      new ForkTsCheckerWebpackPlugin(),
      // cssをcssファイルとして抽出する
      new MiniCssExtractPlugin({
        filename: `./css/${outputFile}.css`,
      }),
      // .envファイルを使えるようにする
      new Dotenv({ path: envFilePath }),
    ],

dotEnvに限らずコマンドごとに何かを変えたい時に --env は利用できるが、複雑にならない様にwebpack configファイル自体を分けるか、 --env で値を変えるかはうまく決めたい。