Vue.jsでWebアプリを作ろう～Webpack設定編～

こんにちは、はい、前回からの続きでVue.js第2段です。

全然関係ないのですが、今日(6/24)はLiSAさんの誕生日のようです。
いやー、ガルデモ(Girls Dead Monster)のころから聞いていた自分としては、レコード大賞とっちゃうようか歌手になるなんて全く思ってませんでした(失礼)
個人的には「Alchemy」って曲がかっこよくて最高に好きです！！

すみません、脱線しましたが前回に引き続きやっていきましょう。

Webpackの設定
1. Webpackとは？
2. configファイルの設定
まとめ

Webpackの設定

webpackについては既にインストール済みのものとします。
前回の記事にインストール手順などは記載してありますので、読んでない方は、先に前回の記事をご覧になるとより理解が深まるかと思います。

Vue.jsでWebアプリを作ろう～(Windows)導入編～

「プログラミング初心者だけど、Webアプリを作りたい！」「HTML、jQueryならわかるけど、SPAはわからないから勉強したい！」最近流行ってますよね、プログラミング。Youtubeを見てると頻繁にオリラジの藤森さんが煽ってくる...

Webpackとは？

そもそもでwebpackって何？美味しいの？って方もいらっしゃると思うので、簡単に説明します。

自分も趣味程度に触ってるだけの底辺プログラマーなので、全然詳しくないのですが、調べたところモジュールバンドラーと呼ばれるようなツールの一種のようです。

モジュールとは、Webアプリを作る上でコーディングしたJavascriptや、スタイルシート、画像、npmでインストールした色々なライブラリなどのことを指しているようで、それらを束ねて、1つのファイルにしたりすることができるようです。

configファイルの設定

さて、ここからが本題です。
webpack用の設定ファイルを手動で生成します。
ファイル名は何でもよいのですが、決まった名前以外のファイル名にするとwebpackコマンドの引数にファイル名を指定しないといけないので、特別な理由がない限りデフォルト名を使うようにしましょう。

$ touch webpack.config.js

作成できたら設定を記述していきます。

Concepts | webpack

webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packagi...

基本的には公式ドキュメントを見て、必要な項目を設定すればよいのですが、今回は以下の通り設定していきます。

const { VueLoaderPlugin } = require("vue-loader");

const MODE = "develop";

const path = require('path');

module.exports = {
    target: 'web',
    watch: true,
    entry: './src/resorce/index.js',
    output: {
        path: path.resolve(__dirname, 'src/public/js'),

        filename: 'bundle.js'
    },
    mode: MODE,
    devtool: 'source-map',
    module: {
        rules: [
          {
            test: /\.css$/,
            use: ["vue-style-loader", "css-loader"]
          },
          {
            test: /\.vue$/,
            use: "vue-loader"
          },
          {
            test: /\.js$/,
            exclude: /node_modules/,
            use: [
              {
                "babel-loader",
                options: {
                  presets: [
                    "@babel/preset-env"
                  ]
                }

              }
            ]
          }
        ]
      },
      resolve: {
        alias: {
          vue$: "vue/dist/vue.esm.js"
        },
        extensions: ["*", ".js", ".vue", ".json"]
      },
      plugins: [
        new VueLoaderPlugin()
      ],
      devServer: {
        contentBase: path.join(__dirname, 'src/public'),

        open: true
      }
};

一つ一つ見ていきます。
※ ちなみに重要な箇所は赤下線、オプション的な設定は青下線で表現します

target
作成する作成するアプリケーションの種類を指定します。
今回はブラウザで動作するWebアプリを作る予定なので「web」を指定します。

watch
バンドルするファイルを監視するかをBool値で指定します。
ちなみにこちらはCLIのオプションでも指定可能です。

entry
はい、こちらは重要な設定項目の1つです。
エントリポイントと呼ばれる起点となるファイルを指定します。
例えばVue.jsで言えば、ルートのVueインスタンスを生成しているようなモジュールを指定します。
今回の例では「./src/resorce/index.js」を指定しています。

output
重要項目2つ目です。
一つにまとめたファイルをどこに出力するかを設定する箇所になります。
今回は「./src/public/js」配下に「bundle.js」という名前で出力するように設定しています。

mode、devtool
こちらは、読んで時のごとく、モードとツールの設定オプションです。
今回は開発を円滑に進めるため、開発モードとなるような設定をしています。

module
重要項目の3つ目です、ローダー・コンパイラの設定箇所になります。
webpackでどんな種類のファイルを束ねて、どんな種類のファイルをコンパイルするかを設定します。
指定の仕方は簡単で、以下のような形で設定をします。

module
  - rules
    - test:ここにはどんな種類のファイルを束ねるかを正規表現で指定します
    - use:利用するローダーを指定します
      - options:詳しいオプションを指定する場合はuseに配列で指定する
  - resolve:Javascript内で別モジュールをimportなどしたりする際に影響する設定です

plugins
重要項目4つ目、プラグインの設定です。
今回は、moduleの箇所で指定しているvue-loaderをうまく動かすために、特定のプラグインを指定しています。

devServer
開発用のローカルサーバーに関する設定です。
ルートディレクトリとサーバー起動時にブラウザも起動するかについてのみ指定しています。

まとめ

如何だったでしょうか、上記の設定を行えばおそらく正しくコンパイル・バンドルが行われるはずです。もっと詳しく知りたいという方は公式ドキュメントに詳しく記載があるので読み込んでみるのもおすすめです。

webpack

webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packagi...

Webpackや今回あまり触れなかったbabelなどを駆使してフロントエンド開発するのは、最近は当たり前のようになってきたようです（しらんけど）

自分のような底辺プログラマーでも何となく理解して、趣味程度のものは作成できるのでVueやフロント開発に興味ある方はぜひ色々調べてみて、自分の作りたいプロダクトを作ってみましょう。

では、また～～～