ゼロからVue+webpack-serveの環境を作るメモ







背景

「基礎から学ぶVue.js」を購入して放置していたので、Vueの復習の意味もこめてやってみる

構成

app.jsをエントリポイントのjsとして、webpackでトランスパイルしたものをoutput.jsに吐き出す。

ブラウザで確認する用のhtmlとしてindex.htmlを用意。

vue-cliを使わずにやった理由

vueプロジェクトを作成するなら、公式のCLIツールであるvue-cliを使用するべきですが、今回は学習なので自前で1からファイル構成を作成。

※実際の開発ではvue-cliを使用することが推奨されます

webpack-serveを使った理由

今回はwebpackの多くに機能を使いこなすというよりも、ホットリロードの仕組みとして使用しました。

やや古い仕組みだけど、gulp+browserSyncでも実現可能です。

手順

リポジトリ作る

npm init vue-rawjs-sandbox

package.jsonに必要なもの入れる

とりあえずvueとwebpack関連のものだけ入れておきます

yarn add webpack -D
yarn add webpack-serve -D

webpack.config.jsを書く

雛形はwebpack-serveのgithubあたりから持ってこれるのでほぼコピペで動かします

webpack.config.js

const path = require('path');

module.exports = {
  context: __dirname,
  devtool: 'source-map',
  entry: ['./app.js'],
  output: {
    filename: './output.js',
    path: path.resolve(__dirname),
  },
};

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-webpack</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="output.js"></script>
</head>
<body>
<div id="app">
    {{ message }}
</div>

</body>
</html>

起動

npm run start

でサーバーが立ち上がります。

ホットリロードが有効になっているので、app.jsを書き換えた瞬間にwebpackでトランスパイル→ブラウザが再描画されます。

便利。

ハマったところ

globalのwebpack-serveから起動しようとするとポートがすでに使われていると言われる

Error: listen EADDRINUSE 127.0.0.1:8080

回避策

根本的な解決策ではないが、npm runインタフェースから通すとうまく動く

package.jsonにnpm run startタスクを定義

{
  // 中略
  "scripts": {
    "build": "webpack",
    "start": "webpack-serve"
  },
  "serve": {
    "open": true
  }
  // ...
}

でnpm run startでwebpack-serveを動かすようにする

Vueがエントリポイントの要素を見つけられない

[Vue warn]: Cannot find element: #app

が表示されてVueコンポーネントが正しく描画されない場合があった

回避策

DOMがロード完了したあとにVueインスタンスを作成するようにする。

document.addEventListener('DOMContentLoaded', () => {
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello,Vue.js'
    }
  })
})

vueのコンポーネントを使用するjavascriptを読み込むscriptタグをbody最下部に持ってくるという解決方法もアリですが、個人的には上記の書き方をしたほうが安全に思えます