はじめに

これからvueを学んでいくのですが、CDNを利用するのは卒業したいなと思ったので、今回はwebpackを使ってvueの環境構築をしていきます。

ディレクトリは以下のようになります。

ディレクトリ構造

vue-application/
 ├ node_modules/
 ├ dist/
 |  └ budle.js
 ├ src/
 |  └ app.js
 |  └ components/
 |    └ sample-component.vue
 ├ index.html
 ├ package.json
 ├ package-lock.json
 └ webpack.config.js

必要なパッケージのインストール

// package.jsonの作成
$ npm init -y

// webpack本体
$ npm install -D 'webpack'

//webpackのcli
$ npm install -D webpack-cli

//vue本体
$ npm install -D vue

//vueコンポーネントを変換する
$ npm install -D vue-loader

//templateをコンパイルする
$ npm install -D vue-template-compiler

----------------------------------------

//一括でインストール
$ npm install -D webpack webpack-cli vue ...

それぞれのパッケージの詳細は以下を参照してください。
webpack
webpack-cli
vue
vue-loader
vue-template-compiler

webpack.config.jsの記述

webpackを使うにはこのファイルに設定を記述する必要があります。

webpack.config.js

const path = require('path');
const VueLoaderPlugin = require("vue-loader/lib/plugin");

module.exports = {
  mode: 'development',
  entry: './src/app.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.vue$/, // ファイルが.vueで終われば...
        loader: "vue-loader", // vue-loaderを使う
      },
    ]
  },
  resolve: {
    // Webpackで利用するときの設定
    alias: {
      vue$: "vue/dist/vue.esm.js"
    },
  },
  plugins: [
    // Vueを読み込めるようにするため
    new VueLoaderPlugin()
  ],
};

mode

modeはwebpack4から追加された項目です。
パラメータ配下のいずれかを選択できるようになっています。

development
production
none

それぞれの環境に対応した最適化を有効にすることができます。
デフォルト値はproductionです。

entry

エントリーポイントを設定できます。
依存関係グラフの構築を開始するために使用すべきモジュールを示します。
デフォルトでは、./src/index.js　になっているため変更しました。

output

webpackが出力するファイルを設定できます。

module

loaderを使用できるようにする設定です。
vue-loaderの他にもcss-loaderやts-loaderの設定もここに記述します。

package.jsonの編集

package.json

{
  "name": "vue_application",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development --watch" // 追加
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "vue": "^2.6.12",
    "vue-loader": "^15.9.6",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^5.24.3",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "^3.11.2"
  }
}

各ファイルの作成

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>Document</title>
</head>
<body>
    <div id="app">
        <sample-component></sample-component>
    </div>
    <script src="./dist/bundle.js"></script>
</body>
</html>

app.js

import Vue from 'vue';
import SampleComponent from './components/sample-component.vue';

const app = new Vue({
    el: "#app",
    components: {
        SampleComponent
    }
})

sample-component.vue

<template>
    <p>{{ message }}</p>
</template>

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

最後に以下のコマンドを叩いてindex.htmlにアクセス

$ npm run dev

【Vue.js】webpackでvueを始めてみる