さっそく vue3 + webpackの環境を作るぞ

2020/09/19 についに Vue 3.0 がリリースされました！
喜ばしいですねぇ～～～

ということで、Aframeを使ったWebXRアプリの開発をVue3でもvue-cliを使わずにやりたいので Vue + Webpack の開発環境をさっそく構築したときの備忘録

プロジェクトフォルダの生成

yarn initで色々聞かれるところは任意で設定してください
今回は全部そのままEnterで進めてます

$ mkdir sample-vue3
$ yarn init
yarn init v1.22.5
question name (sample-vue3):
question version (1.0.0):
question description:
question entry point (index.js):
question repository url:
question author:
question license (MIT):
question private:
success Saved package.json
Done in 2.92s.

Vue 3.0 の追加
```
$ yarn add vue@next
```

Webpack関係のパッケージを追加

$ yarn add webpack webpack-cli webpack-dev-server

Webpack用プラグインの追加
Vue2は yarn add vue-loader で大丈夫なのだが、Vue3 は@vue/compiler-sfc も追加しないとビルドに失敗するので注意
```
$ yarn add vue-loader@next @vue/compiler-sfc html-webpack-plugin
```

webpack.config.jsの作成

const path = require("path")
const HTMLWebpackPlugin = require("html-webpack-plugin")
const { VueLoaderPlugin } = require("vue-loader")

module.exports = {
  entry: {
    index: path.join(__dirname, "src", "main.js"),
  },
  output: {
    filename: "assets/js/[name]-[chunkhash].js"
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: "vue-loader"
      }
    ]
  },
  plugins: [
    new HTMLWebpackPlugin({
      template: path.resolve(__dirname, "public", "index.html"),
      inject: "head"
    }),
    new VueLoaderPlugin()
  ]
}                                                                                  }

main.jsとVue Componentの生成

ルートディレクトリにsrc/フォルダを作成して、その中にmain.jsとApp.vueを作成する

main.js

import { createApp } from "vue"
import App from "./App.vue"

window.addEventListener("DOMContentLoaded", () => {
  createApp(App).mount("#app")
})

App.vue

<template>
  <div>{{message}}</div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      message: "Hello Vue!"
    }
  }
}
</script>

index.htmlの生成

ルートディレクトリにpublic/index.htmlを作成する

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>sample project</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

package.jsonにコマンドの追加

package.json

{
  ...,
  "scripts": [
    "build": "webpack --mode=production",
    "serve": "webpack-dev-server"
  ],
  ...,
}

これで、yarn serveしてhttp://localhost:8080へアクセスすれば Hello Vue! が表示されるはず

ちなみに、現時点でvue-loaderのv16はまだbeta版でした
いつリリースなんでしょうな…

さっそくVue3 + Webpackの環境を作るぞ