hard-source-webpack-plugin使用時に環境変数が切り替わらない問題に対処する

公開日時
更新日時

Nuxt.jsアプリ開発時のビルド時間を短縮するためにhard-source-webpack-pluginを導入した。

キャッシュを作ってくれるおかげでビルド時間は短くなったが、環境変数を更新しても設定が反映されない現象が発生した。

[[rm -rf node_modules/.cache/hard-source/]]

上記コマンドでキャッシュを消せば反映されるが、都度手動でキャッシュクリアするのは手間。

環境変数管理にはdirenvを使っているので、.envrcが更新された場合hにキャッシュをクリアするようにすればよさそう。

というわけで調べてみたら似たような問題がissueに挙がっていた。

Prevent update of environment variables · Issue #417 · mzgoddard/hard-source-webpack-plugin

HardSourceWebpackPluginの初期化時にenvironmentHashを設定することで環境変数を反映できるようになった。

// nuxt.config.ts
{
  build: {
    extend(config, { isClient, isDev }) {
      if (isClient && isDev) {
        config.devtool = 'source-map'
      }
      if (isDev) {
        const HardSourceWebpackPlugin = require('hard-source-webpack-plugin')
        config.plugins!.push(new HardSourceWebpackPlugin({
          environmentHash: {
            root: process.cwd(),
            directories: [],
            files: ['package-lock.json', 'yarn.lock', '.envrc']
          }
        }))
      }
    }
  }
}

参考


Related #nuxt.js

Nuxt.jsのservice workerで環境変数を切り替えられるようにする

設定情報をハードコードしたくなかったので、ビルド時にnodeコマンドでファイル生成を行い環境変数を切り替えられるように対応した。

Nuxt.jsのserverMiddlewareがGAE上だとエラーになる

ディレクトリ位置の問題でserverMiddlewareが動かない現象が発生した

NuxtアプリにCloud Functionsを追加したらビルドエラーが発生

CIでのビルドログ抑制を無効化して、functionsディレクトリをビルド対象から外す必要があった

create nuxt-appで作成したアプリでTapable.plugin is deprecatedが出る場合の対処法

yarn add @nuxtjs/pwa@v3.0.0-beta.16でPWA Moduleを更新する