概要

webpackとは、モジュールバンドラ。
モジュールバンドラとは、
複数のファイルを１つにまとめて出力してくれるツールのこと。
（複数ファイルをまとめることを「バンドル」と呼ぶ）

主にjsをバンドルする役割が多いみたいだが、
CSSや画像などもバンドルできるらしい。

また、SASSの変換など、
コンパイル機能もあるらしいが、
主な用途としてはバンドル。

なぜ使うのか

大きな利点としては、２つ。

開発効率アップ

機能ごとにファイルを分けて開発をすることによって、
コードが整理されて開発効率、保守性が上がります。

システムの性能アップ

たくさんのjsファイルを１ページで読み込もうとすると、
リクエストがその数だけ発生し、
時間がかかってしまいます。

１つのファイルにまとめることで、
リクエストも１回だけにし、
性能を高めることができます。

そのほかにもいろいろ利点があるが、割愛。

使い方

必要なファイル

・バンドル対象のファイル
・エントリーポイントファイル
・webpack設定ファイル

このそれぞれを作っていきます。

バンドル対象ファイル

このような２つのjsファイルがあり、
それを１つのファイルにまとめたいとする。

sample1.js

module.exports.sample1 = function() {
		alert("sample1.jsです。");
}

sample2.js

module.exports.sample2 = function() {
		alert("sample2.jsです。");
}

エントリーポイントファイル

先ほどの２つのファイルのまとめ役となる
エントリーポイントファイルを作成します。

app.js

//まとめたいファイルをインポート
var sample1 = require(./sample1.js);
var sample2 = require(./sample2.js);

//インポートしたファイルの関数を実行できる
sample1.sample1();
sample2.sample2();

モジュールを読み込む方法として
requireとかimportがあるが、
その違いについてはこちらの記事で解説している。
jsのimportとrequireの違い

設定ファイル

次に、webpackの設定ファイルを作ります。

webpack.config.js

module.exports = {
		entry: "./app.js",
		output: {
				path: "./",
				filename: "bundle.js"
		}
}

entryにエントリーポイントファイルを書いて、
outputに、バンドルされたファイル名と出力先パスを書くだけです。

実際にはもっといろいろ設定できる項目があります。

webpack実行

ここまでできたらあとは
コマンド webpack を実行するだけです。

すると、
バンドルされた状態のbundle.jsが出力されます。

htmlファイルの<script>タグでそのファイルを読み込めば、
バンドルした各ファイルの機能を利用できます。

もう少し詳しい機能

モード

設定ファイルにはmodeという項目がある。
develop``production``noneに設定可能。

これをproductionにすると
圧縮されたファイルが出力される。

ローダー、プラグイン

違いはよく分からないが、
webpackにいろいろ便利な追加機能を入れることができる。

ES5のコードに変換してくれるbabelやeslintなど。
npmでインストールしたうえで、
webpack.config.jsに設定を書くと、
その機能を実行してくれる。

参考

https://qiita.com/uchiko/items/9972cfe9341df7ba4a8d
https://qiita.com/bakira/items/3c4e2d10aae085767817
https://qiita.com/kamykn/items/45fb4690ace32216ca25
https://goworkship.com/magazine/how-to-webpack/
https://qiita.com/soarflat/items/28bf799f7e0335b68186