hard-source-webpack-plugin使用時に環境変数が切り替わらない問題に対処する
Nuxt.jsアプリ開発時のビルド時間を短縮するためにhard-source-webpack-pluginを導入した。
キャッシュを作ってくれるおかげでビルド時間は短くなったが、環境変数を更新しても設定が反映されない現象が発生した。
[[rm -rf node_modules/.cache/hard-source/]]
上記コマンドでキャッシュを消せば反映されるが、都度手動でキャッシュクリアするのは手間。
環境変数管理にはdirenvを使っているので、.envrcが更新された場合hにキャッシュをクリアするようにすればよさそう。
というわけで調べてみたら似たような問題がissueに挙がっていた。
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']
}
}))
}
}
}
}