zukucode
主にWEB関連の情報を技術メモとして発信しています。

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

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

バージョンは、Vue.js2.xwebpack2.xです。

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

package.jsonの作成

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

$ npm init

babelのインストール

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

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

$ 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.jswebpack1.x2.xでコーディング方法が異なる場合があるので注意が必要です。

フォルダ構成

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

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

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

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.jsimportしている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ファイルのscriptswebpackをビルドするコマンドを記載します。

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)を起動して、ビルドしたファイルの動作確認を行います。


関連記事

  • vueファイル(単一ファイルコンポーネント)をwebpackでビルド

    vueファイル(単一ファイルコンポーネント)をwebpackでビルドする手順を紹介します。バージョンは、Vue.jsは2.x、webpackは2.xです。わかりやすくするため、空のプロジェクトから出来...


  • Vue.js lessを使いwebpackでビルドする

    .vueファイル(単一ファイルコンポーネント)のstyleをcssではなくlessで実装して、webpackでビルドをします。vue-loaderのオプションにlessのloaderを追加します。


  • Vue.js lessで外部のlessファイルをImportする

    メインカラーなどの共通情報は外部のlessファイルに記載し、各vueファイルではそのlessファイルをImportして実装するのが効率的です。.vueファイル内のlessで外部のlessファイルをIm...


  • webpack モジュールのパスを絶対パスで指定する方法

    自分で作成したモジュールをインポートするときはインポートするファイルを基準に相対パスで指定する必要があります。フォルダ構成によっては深く階層を辿らないといけないので、フォルダ構成が変わってしまうと大変...


  • webpack-dev-serverで開発サーバーを起動する

    webpack-dev-serverで開発サーバーを起動します。vueファイル(単一ファイルコンポーネント)をwebpackでビルドページで紹介したwebpack.config.jsにdevServe...


  • webpack lessをImportしてビルドする

    htmlやbodyなどに適用するベースのクラスを外部のlessファイルに実装して、スタイルをサイト全体に適用したい場合があります。外部のlessファイルをモジュールとしてImportしてwebpack...


  • ExtractTextPluginでcssファイルを出力する

    webpackのプラグインExtractTextPluginを使って、ビルドされたjsファイルからstyleの部分を抽出してcssファイルで出力します。extract-text-webpack-plu...


  • vue-router webpackでページごとにファイルを分割する

    vue-routerでシングルアプリケーションを作成していると、ページ数が増えるにしたがって作成されるjsファイルのファイルサイズもどんどん増えていきます。ページごとにファイルを分割し、そのページがア...


  • Vue.js webpackでHot Module Replacementを行う

    開発を効率化するために、Hot Module Replacement(HMR)の設定を行います。Hot Module Replacementを設定しておけば、ブラウザの再読込は行わず、修正した箇所のみ...


  • Vuex mutationでstateの値を変更する

    stateはmutationの処理でしか変更できません。コンポーネントからmutationを実行し、stateの値を更新する方法を紹介します。mutationを作成するにあたって、最初にmutatio...