vueファイル（単一ファイルコンポーネント）をwebpackでビルド

.vueファイル（単一ファイルコンポーネント）をwebpackでビルドする手順を紹介します。

バージョンは、Vue.jsは2.x、webpackは2.xです。

わかりやすくするため、空のプロジェクトから出来る限り最小構成で作成していきます。（nodejsとnpmはインストール済みとします）

package.jsonの作成

最初にpackage.jsonを作成します。いろいろと質問されますが、すべて何も入力せずに全てEnterキーをクリックしていけば問題ありません。

$ npm init

babelのインストール

babelを使うと、ES2015 (ES6)などで書かれたソースコードを一般的なブラウザがサポートしているECMAScript5の形式に変換できます。

babel-core babel-loader babel-preset-es2015 babel-preset-stage-0の４つのパッケージをインストールします。

$ npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-stage-0

設定ファイルの作成

.babelrcという名前のファイルをプロジェクトのルートフォルダに作成します。

このファイルを作成しておけば、babelを実行する時に自動でこの設定ファイルを読み込みます。

.babelrc

{
  "presets": [["es2015", {"modules": false}], "stage-2"]
}

設定内容は必要に応じて書き換えてください。

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

以下のパッケージが必要になるのでインストールします。

vue
vue-loader
vue-template-compiler
webpack
css-loader

$ npm install --save-dev vue vue-loader vue-template-compiler webpack css-loader

参考までに、この記事を執筆時点での各パッケージのバージョンは以下になります。

package.json

// 一部抜粋
"devDependencies": {
  "babel-core": "^6.24.1",
  "babel-loader": "^6.4.1",
  "babel-preset-es2015": "^6.24.1",
  "babel-preset-stage-0": "^6.24.1",
  "css-loader": "^0.28.0",
  "vue": "^2.2.6",
  "vue-loader": "^11.3.4",
  "vue-template-compiler": "^2.2.6",
  "webpack": "^2.3.3"
}

特にVue.jsとwebpackは1.xと2.xでコーディング方法が異なる場合があるので注意が必要です。

フォルダ構成

Laravelのフォルダ構成に合わせて以下のようにします。

node_modules
public
- js
resources
- assets
  - js
.babelrc
package.json

resources/assets/jsフォルダにjsやvueを実装していきます。

publicフォルダが実際に公開するフォルダです。public/jsフォルダにビルドしたjsファイルが作成されます。

エントリポイント

最初にwebpackで最初に読み込まれるファイルを作成します。

このファイルを起点にwebpackの処理が行われるので、エントリポイントと呼ばれます。

jsフォルダにapp.jsファイルを作成します。

app.js

import Vue from 'vue';
import App from './components/App.vue';

new Vue({
  el: '#app',
  render: h => h(App)
});

単一ファイルコンポーネント

次に.vueファイルを作成します。

先ほど作成したapp.jsでimportしているApp.vueを作成します。jsフォルダにcomponentsフォルダを作成し、その中にApp.vueを作成します。

App.vue

<template>
  <div class="message">
    {{ message }}
  </div>
</template>

<style scoped>
  .message {
    color: red;
  }
</style>

<script>
export default {
  data () {
    return {
      message: 'hello world'
    };
  }
};
</script>

webpackの設定ファイル

webpackの設定ファイルを作成します。webpack.config.jsというファイル名でプロジェクトフォルダの直下（package.jsonファイルと同じ階層）に作成します。

webpack.config.js

const webpack = require('webpack');

module.exports = {
  entry: './resources/assets/js/app.js',
  output: {
    path: __dirname + '/public',
    publicPath: '/',
    filename: 'js/app.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            js: 'babel-loader'
          }
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.common.js'
    }
  }
};

ここまでのフォルダ構成は以下になります。

node_modules
public
- js
resources
- assets
  - js
    - components
      - App.vue
    - app.js
.babelrc
package.json
webpack.config.json

ビルドコマンドの設定

package.jsonファイルのscriptsにwebpackをビルドするコマンドを記載します。

package.json

// 一部抜粋 testはデフォルトで記載されていると思います。
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "webpack": "webpack"
},

実行

npm run webpackを実行するとビルドが行われてpublic/js/app.jsのファイルが作成されます。

webpack-dev-serverで開発サーバーを起動するで、開発サーバー(localhost)を起動して、ビルドしたファイルの動作確認を行います。