Vueコンポーネントを Webpack+babel で扱うための設定

「.vue」ファイルを作成してコンポーネントを扱う際に、「.vue」ファイルをトランスパイルするための設定がないとWebpackでエラーになってしまうので、以下の設定をした。

Vueのインストール

yarn add vue

必要なパッケージをインストール

vue-loader, vue-template-compiler を開発用にインストール

yarn add -D vue-loader
yarn add -D vue-template-compiler

webpack.config.babel.js の設定を追記

vue-loader プラグインを読み込む

vue-loader を使用するために必要なプラグイン。このプラグインを読み込まないと vue-loader が使用できない。

import VueLoaderPlugin from 'vue-loader/lib/plugin';

export default {
plugins: [
        new VueLoaderPlugin(),
    ],
}

vue-loader 公式ページ

modules の設定

「.vue」ファイルを変換して Babel を適用するための設定

module: {
    rules: [
        {
            test: /\.vue$/,
            use: ['vue-loader'],
            exclude: /node_modules/,
        },
    ]
},

etensions　と　alias の設定

extentionsに「.vue」を追加することでimportの際に拡張子を省略して記述できるようにる。
webpack 公式ページ

resolve: {

        extensions: [..., '.vue'],

        alias: {
            vue$: 'vue/dist/vue.min.js',
        },
    },

また、aliasの設定をすることで

import Vue from 'vue/dist/vue';

を

import Vue from 'vue';

とかけるようになる。