Webpack 5でVuetifyを使用する

開発環境は、Windows 10 Pro(64bit) + node v10.15.0。

Vuetifyを使用する環境は、Vue CLIで紹介しているのが多かったのですが、自分は、Webpackを使用したかったので、メモ。

1.Cドライブ直下に、以下のコマンドを1行ずつ入力してプロジェクトを作成

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

2.次に以下のコマンドを入力し、必要なパッケージをインストールします

npm i vue vuetify
npm i -D @babel/core @babel/preset-env babel-loader vue-loader vue-template-compiler sass sass-loader css-loader style-loader vuetify-loader vue-style-loader deepmerge webpack webpack-cli

3.以下、package.jsonの中身。(scriptsの欄にbuildの部分を書き加えました)

{
  "name": "webpack_vuetify",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^2.6.12",
    "vuetify": "^2.4.9"
  },
  "devDependencies": {
    "@babel/core": "^7.13.15",
    "@babel/preset-env": "^7.13.15",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.2.1",
    "deepmerge": "^4.2.2",
    "sass": "^1.32.8",
    "sass-loader": "^11.0.1",
    "style-loader": "^2.0.0",
    "vue-loader": "^15.9.6",
    "vue-style-loader": "^4.1.3",
    "vue-template-compiler": "^2.6.12",
    "vuetify-loader": "^1.7.2",
    "webpack": "^5.31.2",
    "webpack-cli": "^4.6.0"
  }
}

4.以下のファイルをwebpack.config.jsという名前で保存

const { VueLoaderPlugin } = require('vue-loader');
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');

module.exports = {
  mode: "production",
  module: {
    rules: [

      {
        test: /\.js$/,
        loader: 'babel-loader',
        options: {
          presets: [
            '@babel/preset-env',
          ],
        },
      },
      {
        test: /\.vue$/,
        loader: "vue-loader",
      },
			{
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
			},
      {
        test: /\.s(c|a)ss$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              implementation: require('sass'),
              sassOptions: {
                indentedSyntax: true // optional
              },
            },
          },
        ],
      },
    ],
  },
  resolve: {
    alias: {
      vue$: "vue/dist/vue.esm.js",
    },
    extensions: ["*", ".js", ".vue", ".json"],
  },
  plugins: [
    new VueLoaderPlugin(),
    new VuetifyLoaderPlugin(),
  ],
  target: ["web", "es5"],
}

5.srcディレクトリを作成して、その中に、index.jsと、componentsディレクトリとpluginsディレクトリを作成し、componentsディレクトリの中に、App.vueを作成し、pluginsディレクトリ内に、vuetify.jsを作成します。
index.js

import Vue from 'vue'
import App from "./components/App.vue"
import vuetify from './plugins/vuetify'

const app = new Vue({
  el: '#app',
	render: (h) => h(App),
	components: {App, vuetify},
})

vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify)

const opts = {}

export default new Vuetify(opts)

App.vue

<template>
  <div class="app">
    <v-btn dark>Button</v-btn>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>

</style>

5.ルートディレクトリに以下のファイルをindex.htmlという名前で保存。
ここのリンクのFont installationに記述してあるリンクをindex.htmlのheadタグ内に入れ込んでおきます。

<!DOCTYPE html>
<html>
<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">
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script src="./dist/main.js"></script>
</body>
</html>