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

# はじめに

これから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](https://webpack.js.org/)
[webpack-cli](https://www.npmjs.com/package/webpack-cli)
[vue](https://jp.vuejs.org/v2/guide/index.html)
[vue-loader](https://vue-loader-v14.vuejs.org/ja/)
[vue-template-compiler](https://www.npmjs.com/package/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
```

![スクリーンショット 2021-03-06 19.18.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643940/7b693761-b183-afb9-2e3b-c28b7482322b.png)

# おわりに