webpackを用いてVue.jsの単一ファイルコンポーネントを実現する

開発環境は、Windows10 Professional(64bit) + Node v10.15.0 + npm 6.4.1。

1.以下のコマンドを1行ずつ入力してプロジェクトを作成する

cd c:\
mkdir sample_vue
cd sample_vue
npm init -y

2.以下のサイトのwebpack+Babel+Vue.jsの最小構成の欄を参考に、必要なパッケージをインストールする
ics.media

npm i -D @babel/core @babel/preset-env babel-loader css-loader file-loader vue-loader vue-template-compiler webpack webpack-cli

npm i vue

自分がインストールしてみると、package.jsonの中身は以下のようになっていました。
ビルドするために、scriptsの欄に、buildの欄を手動で加えました。

{
  "name": "sample_vue",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.0.1",
    "file-loader": "^6.2.0",
    "vue-loader": "^15.9.6",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^5.11.1",
    "webpack-cli": "^4.3.1"
  },
  "dependencies": {
    "vue": "^2.6.12"
  }
}

次も、上記のサイトを参考にして、webpack.config.jsファイルの部分をコピペして、webpack.config.jsをカレントディレクトリに作成します。

3.カレントディレクトリに、dist, srcディレクトリを作成

4.srcディレクトリ内に、componentsディレクトリを作成し、その中に、以下の3つのファイルを作成

App.vue

<template>
  <div>
    <h1>App.vue</h1>
    <Header></Header>
    <Body></Body>
  </div>
</template>

<script>
import Header from "./Header.vue"
import Body from "./Body.vue"

export default {
  components: {
    Header,
    Body,
  },
}
</script>

<style>

</style>

Header.vue

<template>
  <div>
    <h1>Header.vue</h1>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

Body.vue

<template>
  <div>
    <h1>Body.vue</h1>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

5. srcディレクトリにエントリーポイントとなるindex.jsを作成します
index.js

import Vue from "vue"
import App from "./components/App.vue"

new Vue({
  el: "#app",
  render: (h) => h(App),
});

6. 以下のコマンドを入力してトランスパイルとバンドルを実行

npm run build

7.完成したdistディレクトリ内にあるmain.jsを読み込むために、sample_vueディレクトリに以下のファイルを作成
index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script defer src="./dist/main.js"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

8.実行するために、Expressでサーバーを作り、sample_vueディレクトリに保存
※もっと簡単な方法として、http-serverを使うと良いです。以下のコマンドを入力して、インストール。

npm i -g http-server

サーバーを実行するタイミングで、

http-server

とすれば、localhost:8080でサーバーにアクセスできます。

Expressをインストールする

npm i express

server.js

const express = require("express");
const app = express();
const path = require("path");

app.listen(8080, () => {
  console.log(8080);
});

app.use(express.static(path.join(__dirname)));

app.use((req,res) => {
  res.sendStatus(404);
});

9.sample_vueディレクトリにて、以下のコマンドを入力して、サーバーを実行

node server.js

localhost:8080にアクセスしてみる。
実行結果
f:id:k01ken:20210104194859p:plain

ソースコードをgithubに上げておきます。
github.com

[追記]単一ファイルコンポーネントのstyle部分は、現状のままだとなぜか、反映されなかったので、調べてみると、webpack.config.jsの中で、vue-style-loaderではなくて、style-loaderに変更すると、意図した通りに反映されました。style-loaderを新たにインストールしてから、使ってみてください。
teratail.com

■参考リンク
単一ファイルコンポーネント — Vue.js
最新版で学ぶwebpack 5入門 - Babel 7でES2020環境の構築(React, Vue, Three.js, jQueryのサンプル付き) - ICS MEDIA
Node.jsとExpressでローカルサーバーを構築する(2) ―Expressでルーティング― - Qiita