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 ファイルを作成して、以下の内容を記述します。

webpack.config.js
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 を編集し、以下の内容を記述します。

webpack.config.js
  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 に以下の内容を記述します。

./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 を、以下のように記述します。

index.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.config に以下の内容を追記します。

webpack.config.js
......
    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"production"'
            }
        }),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        }),
        new webpack.optimize.OccurrenceOrderPlugin()
    ]