MPA な環境で vue-cli を使いたくなった時のメモ #vue-cli

これは SOUSEI Technology アドベントカレンダー13日目の記事です

つい先日、MPA な環境で vue-cli を使いたく、いろいろといじったことのメモです。

MPA！？

かっこいい名前ですが、SPA (Single-page application) の対義語。
リクエストに応じたHTMLを返すやつです。

こんな名前ついてるのは、知り合いに聞くまで知りませんでした

vue-cli

Vue.js の開発環境を簡単に作れる物です。
https://cli.vuejs.org/

ESLint や Sass、TypeScript 等、自分が使いたいものを選択し、それに合わせた設定ファイルなんかも最初に作ってくれます。

いっぱい記事あるので、ここでは細かいことは割愛！

MPA + vue-cli

MPA な環境ですと、画面の HTML なんかはバックエンド側でテンプレートエンジンなんかを使って用意します。
また、JavaScript や CSS などの読み込みもバックエンド側のテンプレートで記述しなくてはいけなくなります。

そうなると...

デフォルトの vue-cli がやってくれる

最適化された HTML の出力
生成したファイル名に追加されるハッシュ値

この辺りは不要になるので、まずは上記の機能を無くしていきます。

（「生成したファイル名に追加されるハッシュ値」 に関しては、それがあっても良い感じで読み込んでくれるような仕組みがあれば問題ないでしょう。自分にはできませんでした！！）

やめてみる

vue-cli のサイトにちゃんと書いてありました。
（30分ほど他のサイトなんかで彷徨ったのは内緒）


// vue.config.js
module.exports = {
  // disable hashes in filenames
  filenameHashing: false,
  // delete HTML related webpack plugins
  chainWebpack: config => {
    config.plugins.delete('html')
    config.plugins.delete('preload')
    config.plugins.delete('prefetch')
  }
}

参考: HTML and Static Assets | Vue CLI

確認してみる

ありがたいことに、vue-cli では Webpack の設定をファイルに出力してくれるコマンドがあるので、それを使って確認することができます。

参考: Working with Webpack | Vue CLI

変更されたもの

「最適化された HTML の出力」関連

plugins: [
  /* config.plugin('html') */
  new HtmlWebpackPlugin(
    // 設定が書いてある
  ),
  /* config.plugin('preload') */
  new PreloadPlugin(
    // 設定が書いてある
  ),
  /* config.plugin('prefetch') */
  new PreloadPlugin(
    // 設定が書いてある
  ),
],

上記の設定が消えていると思います。

「生成したファイル名に追加されるハッシュ値」関連

file-loader の設定例ですが、

options: {
  name: 'img/[name].[hash:8].[ext]'
}

が

options: {
  name: 'img/[name].[ext]'
}

の様に変更されていました。

だがしかし

JavaScript のハッシュに関しては...どこでやってるのかわからず...

output.filename だったり、 output.chunkFilename かと思ったのですが、どうやら違う模様。

奥が深いぜ Webpack。個人的にどこでどうやってるのか調べてみたいところ。

まとめ

公式のサイトにきちんと書いてあったので、特に問題はなかったですが、「どうやってやってるのだろうか...」と謎が深まりました

参考資料

Vue CLI