webpackを利用したVue.jsのビルド環境を作成する

スポンサーリンク

はじめに

webpackを利用したVue.jsのビルド環境を作成するためのまとめです。

環境

OS Windows 7 Pro 64bit
その他 npm 3.10.10
webpack 2.2.1
vue.js 2.1.10

インストール

npmを使用してwebpackとvueをインストールしていきます。最終的なフォルダ構成は以下のようになります。

root
  ┣ node_modules
  ┃   ┗ vue
  ┣ public
  ┃   ┣ js
  ┃   ┃  ┗ index.js
  ┃   ┗ index.html
  ┣ src
  ┃   ┗ js
  ┃       ┗ index.js
  ┣ package.json
  ┗ webpack.config.js

webpackのインストール

webpackでVue.jsをビルドするためにwebpackをグローバルにインストールします。

> npm install -g webpack

webpack.configファイルを作成して以下の内容を記述します。

const path = require('path');

module.exports = {
    entry: {
        'js/index': './src/js/index.js'
    },
    output: {
        path: path.join(__dirname, 'public'),
        filename: '[name].js'
    }
}

Vue.jsのインストール

npmにてvueをインストールします。

> npm install --save-dev vue

npmでインストールされるvueはランタイム限定ビルドとなり template オプションをサポートしていません。そのため template を使用するためにwebpack.configを作成し以下の内容を記述します。

  const path = require('path');

  module.exports = {
      entry: {
          'js/index': './src/js/index.js'
      },
      output: {
          path: path.join(__dirname, 'public'),
          filename: '[name].js'
      },
+     resolve: {
+         alias: {
+             'vue$': 'vue/dist/vue.common.js'
+         }
+     }
  }

ビルドと実行

webpackを使用してvueをビルドし実行ファイルを作成します。

webpackによるビルド

エントリーポイントとなる ./src/js/index.js に以下の内容を記述します。

var Vue = require('vue');

var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
});

以下のコマンドを実行してjsファイルをビルドします。

> webpack

正常にビルドされた場合は ./public/js/index.js ファイルが作成されます。

実行

実際にjsを読み込んで実行するためのhtmlを以下のように記述します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue test</title>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>
<script src="js/index.js"></script>
</body>
</html>

ブラウザを開き画面に Hello Vue! と表示されれば成功です。

その他

productionビルドする場合

productionビルドする場合はwebpackコンフィグに以下の内容を追記する。

    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"production"'
            }
        }),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        }),
        new webpack.optimize.OccurrenceOrderPlugin()
    ]
スポンサーリンク

シェアする

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

フォローする