概要
webpackとは、モジュールバンドラ。
モジュールバンドラとは、
複数のファイルを１つにまとめて出力してくれるツールのこと。
（複数ファイルをまとめることを「バンドル」と呼ぶ）
主にjsをバンドルする役割が多いみたいだが、
CSSや画像などもバンドルできるらしい。
また、SASSの変換など、
コンパイル機能もあるらしいが、
主な用途としてはバンドル。
なぜ使うのか
大きな利点としては、２つ。
開発効率アップ
機能ごとにファイルを分けて開発をすることによって、
コードが整理されて開発効率、保守性が上がります。
システムの性能アップ
たくさんのjsファイルを１ページで読み込もうとすると、
リクエストがその数だけ発生し、
時間がかかってしまいます。
１つのファイルにまとめることで、
リクエストも１回だけにし、
性能を高めることができます。
そのほかにもいろいろ利点があるが、割愛。
使い方
必要なファイル
・バンドル対象のファイル
・エントリーポイントファイル
・webpack設定ファイル
このそれぞれを作っていきます。
バンドル対象ファイル
このような２つのjsファイルがあり、
それを１つのファイルにまとめたいとする。
module.exports.sample1 = function() {
alert("sample1.jsです。");
}
module.exports.sample2 = function() {
alert("sample2.jsです。");
}
エントリーポイントファイル
先ほどの２つのファイルのまとめ役となる
エントリーポイントファイルを作成します。
//まとめたいファイルをインポート
var sample1 = require(./sample1.js);
var sample2 = require(./sample2.js);
//インポートしたファイルの関数を実行できる
sample1.sample1();
sample2.sample2();
モジュールを読み込む方法として
requireとかimportがあるが、
その違いについてはこちらの記事で解説している。
jsのimportとrequireの違い
設定ファイル
次に、webpackの設定ファイルを作ります。
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