はじめに
お久しぶりです！新垣です！今回はVue.jsで新規作成したVue.jsアプリケーションがホットリロードされず、すぐ解消できるやろと舐めてかかったら積んだ話です！
Vue.js で新規作成したアプリケーションがホットリロードされない?
ある日のこと。業務の一環で作成したVue.jsプロジェクトが何故かホットリロードされない現象が発生しました。私もVue.jsに慣れてきた頃でGoogleで調べてみるとヒットする記事が多々出てきました。
【メモ】Vue CLI でホットリロードが効かない
https://qiita.com/ntm718/items/6023b0063f78d53192a1
しかし、設定を行っているvue.config.jsを確認したところ、設定にdefineConfigを利用しており参考になりませんでした。
vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true
})defineConfig を使ってどのようにホットリロード設定するか
早速結論ですが以下のように設定するとホットリロードが上手く動作するようになります。
module.exports = defineConfig({
transpileDependencies: true,
configureWebpack: {
watch: true
}
})
一応なぜこのような記述になるのかを解説しておきます。
ホットリロードというのはwebpackのwatchもしくはwatch optionを利用してファイルを監視し、変更があるたびビルドするように設定する必要があります。つまり、defineConfigを使ってwebpackのwatchの設定をオンにする必要があるということになります。
Watch and WatchOptions | webpack
https://webpack.js.org/configuration/whttps://webpack.js.org/configuration/watch/atch/
defineConfig が定義されていたのは以下の場所になります。
node_modules\@vue\cli-service\types\index.d.ts 136行目 – 138行目
export { ProjectOptions, ServicePlugin, PluginAPI }
type UserConfig = ProjectOptions | ConfigFunction
export function defineConfig(config: UserConfig): UserConfig
defineConfig の引数に型として宣言されているUserConfig は ProjectOptions もしくは ConfigFunction を型として受けます。ProjectOptionsはどのような定義がされているでしょうか。
node_modules\@vue\cli-service\types\ProjectOptions.d.ts 138行目 – 145行目
/**
* A function that will receive an instance of `ChainableConfig` powered by [webpack-chain](https://github.com/mozilla-neutrino/webpack-chain)
*/
chainWebpack?: (config: ChainableWebpackConfig) => void;
/**
* Set webpack configuration. If the value is `Object`, will be merged into config. If value is `Function`, will receive current config as argument
*/
configureWebpack?: WebpackOptions | ((config: WebpackOptions) => (WebpackOptions | void));
ここでwebpackの設定を受けています。ここで型として定義されているWebpackOptionsの内容をさらに確認してみましょう。
node_modules\webpack\types.d.ts 2280行目 – 2284行目
/**
/**
* Enter watch mode, which rebuilds on file change.
*/
watch?: boolean;watchモードの設定が見つかりました。watch: プロパティをtrueにすることでホットリロードを実現することができそうです。
まとめ
今回defineConfigを使ったホットリロードの設定方法がなかなか見つからずvue内部のコードを参照する必要がでてきました。便利なフレームワークやライブラリ等を利用していると内部処理を理解せずエラー解消に時間がかかることがしばしばあります。フレームワークやライブラリに振り回されないようにこれからも精進しようと感じました。
