この記事は「Atrae Advent Calender」の8日目の記事です。
今回は入社してすぐに任されたwebpackについて書こうと思います。

webpackとは

jsやstylesheetなどをファイルを１つにまとめるもので、モジュールバンドラーと呼ばれています。言葉で説明してもいまいちピンとこないと思うので実際のコードを見てみましょう。

index.js

import hello from "./hello"

hello();

hello.js

export default function hello() {
  console.log('hello world');
}

例えば上記のような場合では、上の２つのファイルをwebpackがbundleして１つのファイルにまとめてくれることによって、他のファイルで定義した関数などを使うことができます。

今回の例ではあまり恩恵を感じられませんが、Reactなどでコンポーネントを再利用したり、役割ごとにコンポーネントを分けて作ったりすることを考えると必須になってきます。

webpackの設定

webpackをうまく使うためにはwebpackの設定ファイルであるwebpack.config.jsの設定について知る必要があります。実際の例を使って説明していきます。

webpack.config.js

module.exports = {
  mode: "development",
  entry: ["./src/index.js"],
  output: {
    filename: "bundle.js",
    path: __dirname + "/public"
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        use: "babel-loader",
        exclude: /node_modules/
      }
    ]
  }
};

mode

2行目のmodeは環境ごとに設定を分けるときに使うものです。

設定	説明
development	開発環境用の設定
production	本番環境用の設定
none	特に指定しないときの設定で、デフォルトではこれになる。

の3つの設定があり、開発環境と本番環境で設定を分けたい場合にはファイルをwebpack.prod.config.jsのように分けることもできます。

entry

webpackがbundleを始めるファイルを指定する。そのファイルからimportなどの依存関係を解決していきます。そのためindex.jsのような一番上位層にあるファイルを指定する必要があります。

output

bundleしたファイルを出力するときの設定部分です。
pathとfilenameを使って出力するファイルのパスと名前を決めます。htmlなどで読み込むjsファイルはここで指定したpathと同じものにする必要があります。
またここでは[name]や[hash]などの特定の文字列を使うことができます。それによって出力パスを設定したり、ハッシュ値をつけたりすることができます。

module

test

ここではどのファイルを対象とした設定なのかを記述します。拡張子を指定し、jsファイル、stylesheet、画像ファイルなどで設定を分けることができます。

use

使うloaderを指定する部分です。
loaderには様々なものがあります。（参考: webpack の Loader を試してみる)
これはbundleするファイルの種類や使う用途によって使い分ける必要があります。
具体的にはstylesheetだったらcss-loaderやsass-loader、画像ファイルだったらfile-loaderを使うというような切り分け方です。

exclude

対象としないファイルを設定します。今回の例ではnpmでインストールしたライブラリーはbundleには入れないのでnode-modules以下のファイルを除外しているという形になっています。

まとめ

今回紹介したこと以外にもpluginを使った機能やaliasを設定するなどwebpackでできることは多くあります。僕ははじめ理解するのに苦労したので、同じように新しくwebpackを勉強し始める人の助けになれればと考えwebpackの基本的な部分の紹介をしました。少しでもそのような人の助けに少しでもなることができれば幸いです。

webpack入門: webpackってどう使うの？