この記事は JSL (日本システム技研) Advent Calendar 2020 - Qiita 25日目の記事です。
webpackとは
- JavaScriptファイルをひとつにまとめるツール
- ローダーを使えば他のファイルもまとめることができる
- それぞれのファイルを束ねる(バンドルする)役割から、モジュールバンドラーとも呼ばれる
- 複数のJavaScriptコードの依存関係を自動で解析して、バンドルしてくれる
メリット
- 自動的に依存関係を解決してくれる
- リクエストの回数を抑える
- 複数のファイルをひとつにバンドルすることで、リクエストを減らせる -> 転送効率上昇
前述の利点から、多くのJavaScriptフレームワークで採用されている。
ex ... Angular、React、Vue.js
これらのフレームワークを学ぶ上で有用な前提知識を本記事で身につけましょう。👍
ハンズオン準備
作業フォルダの作成
- 作業ディレクトリは
study-webpackとしてハンズオンを進めていく
- study-webpack
|- ...
※後述の操作について、特別な指定が無い場合は
study-webpack直下で実行しています
プロジェクトの作成
- 以下のコマンドを実行し、設定ファイル(package.json)を作成
> npm init -y
- webpack/webpack-cliをインストールする
> npm install --save-dev webpack@4.44.1 webpack-cli@3.3.12
バンドル対象のファイルを準備
- study-webpack
|- dist
| |- index.html <- index.jsを呼び出すhtmlファイル
|- src
|- index.js <- myutilモジュールを呼び出し実行するjsファイル
|- myutil.js <- 三角形の面積を求める関数などを定義したjsファイル
以下、ソースコード
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>webpackハンズオン</title>
</head>
<body>
<p>Hello, webpack</p>
<script src="./main.js"></script>
</body>
</html>
index.js
var myutil = require('./myutil');
console.log(myutil.APP_NAME);
myutil.hello();
console.log(myutil.Figure.getTriangle(10, 5));
myutil.js
const message = 'こんにちは、webpack！';
const APP_NAME = 'webpackハンズオン';
function hello() {
console.log(message);
}
class Figure {
static getTriangle(base, height) {
return base * height / 2;
}
}
module.exports = {
message,
APP_NAME,
hello,
Figure
};
上記ディレクトリ/ファイルが用意できたらバンドルを行う準備は完了です。👍
バンドルの実行
- バンドル対象のファイルが準備できたので、以下のコマンドを実行
> ./node_modules/.bin/webpack
Hash: 419eec4e9cda32e1d2f8
Version: webpack 4.44.1
Time: 266ms
Built at: 2020-10-22 01:15:59
Asset Size Chunks Chunk Names
main.js 1.07 KiB 0 [emitted] main
Entrypoint main = main.js
実行後、dist配下にmain.jsが作成されていることを確認する。
- index.htmlをブラウザで開く
> open index.html
Hello, webpack の文言と、コンソールにログが出力されていればバンドルに成功。👍
main.jsは、index.jsとmyutil.jsがバンドルされて作成されたファイルのため、index.htmlはmain.jsの参照だけでindex.jsとmyutil.jsのプログラムを利用することができるようになりました。🎉
設定ファイル(webpack.config.js)を別途定義することによって、バンドルの仕方はいろいろ変更することもできるので、調べて試してみましょう。