Webpackを使用してVue.jsを走らせるためのメモ

前提条件

node, npm が入っていること。

$ cat /etc/issue webpack_test2
CentOS release 6.8 (Final)
Kernel \r on an \m

$ node -v
v6.6.0
$ npm -v
3.10.3

webpack, vue のインストール

$ npm init
$ npm install vue --save
$ npm install webpack --save-dev

グローバルインストールしていないので、パスは通っていない。

ファイルの用意

index.html

$ cat index.html
vagrant-centos65:vagrant$ cat index.html                                                                 vuetest
<!DOCTYPE thml>
<html lang="ja">
<head>
    <title>Webpack test</title>
</head>
<body>
    <div id="app">
        <p>{{text}}</p>
    </div>
    <script type="text/javascript" src="js/bundle.js"></script>
</body>
<html>

app.js

$ cat js/app.js
var Vue = require('vue');

var vm = new Vue({
  el: '#app',
  data: {
      text: "hello world"
  }
});

ビルド

$ ./node_modules/.bin/webpack js/app.js js/bundle.js --resolve-alias vue="vue/dist/vue.js"
Hash: e33fc64a7e1502f6cbff
Version: webpack 1.13.2
Time: 286ms
    Asset    Size  Chunks             Chunk Names
bundle.js  197 kB       0  [emitted]  main
   [0] ./js/app.js 104 bytes {0} [built]
    + 1 hidden modules

--resolve-aliasを入れないと、デフォルトでVue.jsがRuntime-only buildになり、正常に動いてくれなかった。

後はindex.html を開けばvueでhello worldが表示される。

設定ファイルからビルドする場合

以下のようにwebpack.config.jsを記述すればOK。

$ cat webpack.config.js                                                          vuetest
module.exports = {
  entry: './js/app.js',
  output: {
    path: __dirname,
    filename: './js/bundle.js'
  },
  module: {
    loaders: [
    ]
  },
  resolve: {
    alias: {
      vue: 'vue/dist/vue.js'
    }
  }
};

webpackを叩けばファイルを読み込んで実行される。

$ ./node_modules/.bin/webpack
 Hash: 4e85503c2b0c78bc3f13
Version: webpack 1.13.2
Time: 297ms
         Asset    Size  Chunks             Chunk Names
./js/bundle.js  197 kB       0  [emitted]  main
   [0] ./js/app.js 104 bytes {0} [built]
    + 1 hidden modules