youtubeでモダンフロントエンド関連の動画を上げられているとらハックさんというyoutuberがyoutubeに投稿されているTypescript入門で環境構築を行う際に、webpack.config.jsというファイルをいじる場面が出てきたが、何をやっているかいまいち理解できていないのでそれを理解するためにこれから書き殴っていこうと思います。

設定はこんな感じ↓

const path = require('path');
module.exports = {
  entry: {
    bundle: './src/index.ts'
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js'
  },
  resolve: {
    extensions:['.ts','.js']
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    open: true
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        loader: 'ts-loader'
      }
    ]
  }
}

entryとoutput

entry

entryではwebpackがビルドした時に読み込むファイルを設定している。
webpackはこのファイルの中身を見て、ファイルの依存関係を考慮してビルドを行ってくれる。
今回は以下のように記述されている。

  entry: {
    bundle: './src/index.ts'
  },

「srcディレクトリの中にあるindex.tsを見て、ファイルの依存関係等を考慮した上でファイルをひとつにビルドするよ」みたいな意味。

output

outputではwebpackがビルドしたファイルをどこに出力するのかを設定している。
今回は以下のように記述されている。

  output: {
    path: path.join(__dirname, 'dist'), // "__dirname"はファイルが存在するディレクトリ
    filename: '[name].js'  // [name]はentryで記述した名前（この設定ならbundle）
  },

pathには、ビルドしたファイルの出力先、
filenameには、ビルドしたファイルの名前を設定している。

path

今回、pathは以下のように記述されている

  path: path.join(__dirname, 'dist'),

バリューにある「path」はnpmに標準で搭載されているモジュールで、ファイルのパスを出力する際に使用するものなので、ファイル上部でrequireするのを忘れずに。

  const path = require('path');

「ルートにあるdistというディレクトリにビルドしたファイルを出力するよ」みたいな意味。

filename

今回filenameには以下のように記述されている。

  filename: '[name].js'

[name]には、entryで読み込むファイルのキー名が紐づくので、今回は「bundle.js」というファイルがビルド後のファイルが出力されることになる。

今回、entryとoutputに書いてあることをまとめると、「僕（webpack）は、ファイルをビルドするとき、index.tsというファイルを読み込んでから、ファイルの依存関係を考慮した上で、distディレクトリの中にbunle.jsという名前で、ビルドしたファイルを出力するよ」みたいな意味になる。

resolve

resolveには、ファイルをimportする際の設定を行うことができる。
今回は以下のように記述されている。

  resolve: {
    extensions:['.ts','.js']
  },

「ファイルをインポートするときは.tsと.jsを省略できるよ」みたいな意味。

devServer

devServerでは、開発用のサーバーの設定を行うことができる。
今回は以下のように記述されている。

  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    open: true
  },

contentBaseには、webpack-dev-server(パッケージ)が開発環境でファイルをビルドする際に参照するディレクトリ、
openには、ローカルでwebサーバーを立ち上げた時にブラウザを勝手に立ち上げるか否かみたいな設定を記述。

contentBase

今回は以下のように記述されている

　　contentBase: path.join(__dirname, 'dist'),

「僕（webpack-dev-server）は、開発環境でファイルをビルドするときは、ルートにあるdistというディレクトリを参照しますよ」みたいな意味。

open

今回は以下のように記述されている

　　open: true

「あなた（開発者）が開発環境でwebサーバーを立ち上げた時、自動的にブラウザも立ち上げちゃいますよ」みたいな意味。

module

moduleでは、モジュールの設定を行うことができる。
今回は以下のように記述されている。

  module: {
    rules: [
      {
        test: /\.ts$/,
        loader: 'ts-loader'
      }
    ]
  }

※モジュールとパッケージの違い
moduleは、妥当な機能を備えた単一のJavaScriptファイルで、packageは、1つ以上のモジュールが内部にあるディレクトリです。

testには、ローダーが読み込むファイルの設定、
lorderには、ローダーとして何を使用するのか設定を記述できる。

loder

今回は以下のように記述されている。

loader: 'ts-loder'

見ての通り、「ローダーはts-loderを使いますよ」という意味。

test