Vue CLI 3系とWebpackの関係

こんにちは、かずやです。

先日SPAに関するざっくり記事を書きました。

今回は、SPAのフレームワークであるVue.jsを使っていた中で理解が追いつかず無駄に時間を食ってしまった事象に関するブログ記事です。

短めの予定。

Vue.jsの単一ファイルコンポーネントとWebpack

Vue.jsの単一ファイルコンポーネントとは、.vueファイルにHTML, CSS, JavaScriptのコードをひとまとめにすることで、パーツをカプセル化・再利用可能な形にできるVue.jsの機能になります。

これ、非常に便利なわけですが、最終的にビルドを行なって単一のファイルに出力するわけですよ。.vueなんてブラウザは直接扱えませんから。

ということはバンドルツールが必要なわけで、WebpackやBrowserifyといったツールを使って、.vueファイルをバンドルします。

公式にもこう書いてありますよ。

これら全ては Webpack や Browserify のビルドツールにより実現された .vue 拡張子の 単一ファイルコンポーネント で解決します。
単一ファイルコンポーネント — Vue.js

Vue CLIにおけるバンドルツール

Vue CLIは、vueのプロジェクトを簡単に作成してくれるCLIツールになります。

例えば、

vue create my-app

とすれば、my-appという名前のvueプロジェクトを勝手に作ってくれるわけですね。便利。

さて、このvue createで作られたプロジェクトのpackage.jsonを見ると、おかしなことに気づきます。

Scripts部分をみると、buildの項目にビルドツールの名前が出てこないんですね。

Webpackに慣れてきた頃だったぼくは「ああ、Webpack使ってないのか。自前で入れなきゃなあ」と何の気なしに思うわけです。

これでどハマりしました。

vue-cli-serviceはWebpackをラップしている

詳しくは端折りますが、Webpackを明示的に入れようとすると、いろんなところでつっかかります。 vue init なる方法を調べてやったらバージョンの依存関係で引っかかりまくったりとか。まあ色々…(思い出したくない

※vue initはvue-cli 2系にあったテンプレートプロジェクトを利用するためのコマンドだそうな…

それで、ぶらぶらネットサーフィンしまくっていたら、気になる記述を見つけまして。

vue-cli-serviceはWebpackをラップしている

…ん?

ぼくは慌てて、公式サイトを改めて見てみたわけです。

Vue CLIはwebpack 4の上に構築された事前設定済みのビルド設定を提供します。

(。-∀-) < …なんや

まとめ

ちゃんと公式サイト読もう(これで3時間くらい溶かした…

シェアする

  • このエントリーをはてなブックマークに追加

フォローする