Webpackに雑に入門してみる
webpack に雑に入門してみる
webpack とかよくわかってないな、と思い雑に入門してみました。
せっかくなので、メモがてら記事として公開します。
Webpack とは
モジュールバンドラのことです。
モジュールとは機能ごとに分割されたファイルで、簡単にいうと変数/関数などが書かれたプログラムのことです（詳しくは ECMAScript の Module、Common JS のモジュールなどを参照してください）。
その塊を 1 つにまとめてあげるのがモジュールバンドラ、そして Webpack がやっていることです。
簡単に例を示すと
<script src="a.js"></script>
<script src="b.js"></script>
<script src="c.js"></script>
JS は素のままではこのように各ファイルをそれぞれ html ファイルで読み込ませる必要がありますが、上記で登場する a.js/b.js/c.js をまとめてあげて
<script src="index.js"></script>
としできるようにしているものです。
なんで Webpack が必要なの？
理由は色々ありますが、大きな目標は「モジュールを分割してコードは書きたいが、都度ファイルを読み込ませるのは辛いので、1 ファイルにはまとめておきたい」というところになると思います。
まず、モジュール分割のメリットとして 1 ファイルがとんでもない量になって保守性がなくなったりすることを避けることができます。
が、一方でモジュール分割をすると、B では A モジュールの関数を使うため、素の状態では A→B のように記述をしないとならない、そもそも最初の webpack の例で挙げたように、script タグを大量に描く必要がある、各ファイルを辿って実行をする必要があって実行速度が遅くなるといったことがあります。
なので webpack がそれらを単一ファイルとしてまとめ上げることで、モジュールの順序から script タグの分量、実行速度まで解決をしようというわけです。
より詳しく知りたい方は公式を見るとよりわかりやすかもしれません。
また、webpack はモジュールバンドル以外にも静的解析なども行えますが、今回は一旦そちらについては置いておきます。
webpack を簡単に試す
何はともあれ、webpack を試してみましょう。
今回 webpack を試すのに使った環境
node v14.17.0
npm 6.14.13
まずは適当なディレクトリを作り、で npm init しましょう。
npm init
続いて、webpack を追加
npm install -D webpack webpack-cli
ここの webpack-cli はコマンドラインから webpack を呼び出すためのものです。
続けて、ディレクトリをいい感じに作りましょう。
├─ dist
│ └─ index.html
├─ package.json
├─ src
│ ├─ index.js
│ └─ modules
│ └─ greeting.js
└─ webpack.config.js
簡単にファイルの説明をしましょう。
package.jsonはnpm initすると作成されるファイルです。
プロジェクトについての記載や、使われる npm ライブラリの依存関係を示すファイルになります。
distディレクトリは今回 webpack でバンドル後の結果を保存するためのディレクトリです。
srcディレクトリは今回バンドルする JS ファイルを格納します。
index.jsをエントリーポイント、modules 配下を複数のモジュールを配置するディレクトリとします。エントリーポイントについては続きで説明します。
webpack.config.jsは webpack についての設定ファイルです。
では、webpack.config.js に設定を記載しましょう。
module.exports = {
entry: "./src/index.js",
output: {
path: `${__dirname}/dist`,
filename: "bundle.js",
},
mode: "development",
};
上から順に説明しましょう。
entryはエントリーポイント、つまりはどのファイルを基準として依存関係を解消するかを書きます。
エントリーポイントは複数ファイルを指定できますが、今回は src 配下のindex.jsを指定します。
index.jsから依存関係を辿ってモジュールやライブラリを読み込みます。
outputはその名前の通り、どの場所に、どんなファイル名で出力するかを指定します。
pathにどこへ展開するか（今回はdist）、filename にどんなファイル名で出力するか（今回はbundle.js）を記載します。
modeはコンパイル方法を切り替えてくれます。
developmentではソースマップ、簡単にいうと変換前後のコードを比較できるかつ早くビルドが終わります。
productionではファイルを小さくしてくれますが、ビルドが遅くなります。
今回はdevelopmentで作業を進めます。
適当にそれ以外のファイルも埋めてしまいましょう。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script src="./bundle.js" type="module"></script>
</body>
</html>
greeting.js
export function greeting(name) {
const message = `${name}さん、こんにちは！`;
alert(message);
}
index.js
import { greeting } from "./modules/greeting.js";
greeting("tes user");
最後に、package.json にコマンドを追加しましょう。
"build": "webpack"
さて、準備は全て終わったので最後にバンドルをさせてみて動作を確認してみましょう。
npm run build
上記コマンドを打つと、dist 配下にbundle.jsが生成されたかと思います。
その状態で liveserver を使ってdist/index.htmlを確認してみましょう。アラートが表示されれば成功です。
おまとめ/余談
webpack について、少し理解できたのではないかと思います。
webpack は他にもloader、pluginsが説明していない機能として存在します。
loaderは簡単に説明すると、JS 以外のファイルもモジュールとして変換をするための機能です。 CSS などを読み込むための方法をここに記載することで、JS 以外のファイルもバンドルすることができるようになります。
pluginはファイルをまおめる以外の様々なタスクを実行してくれます。
例えば静的解析などがここにあてはまります。
この 2 つがバンドル+α の webpack の強みとなりますが、今回は webpack の本質となるモジュールのバンドルのみを記載しました。
また別の記事で余力があれば他のことも書いて行きたいと思います。
Discussion