WEBフロントエンジニア_webpack導入

1. はじめに
2. メリット・デメリット
- 2.1. メリット
- 2.2. デメリット
3. 導入方法
4. 実操作
5. 最後に

はじめに

以前よりwebpackというものが個人的に気になっていました。
ザックリいうと、WEBサイト構築に関連する
複数のファイル（モジュール）をまとめてくれる（バンドルする）ツール（モジュールバンドラ）となります。

気になりつつも敷居が高い印象で嫌遠していたのですが、、
ちょうど業務でwebpackの導入予定があり、予習と備忘も兼ねて今回の記事を作成しようと思います。

導入にあたってのメリデメおよび、導入方法と簡単な操作までを書こうと思うので、参考になれば幸いです。

メリット・デメリット

メリット

・ファイル分割の最適化
　∟読込ファイル削減の観点からやむなく纏めていたファイルを、運用/保守の観点から細分化できる
・モジュールの統合
　∟リクエスト（通信回数）削減による表示速度の向上
・豊富なプラグインによる拡張性の高さ
　∟ローカル環境でajaxの確認、CSSや画像の圧縮、等々

デメリット

・デバック効率の低下
　∟元のソースがない場合、バンドルされた（見慣れない）ソースを元にデバックする事になる
・ビルド作業が必須
　∟例えば軽微な修正においても、必ずビルド作業を行うひと手間が増える

導入方法

1) 事前準備
Node.jsとVSCodeがない場合はインストールしておきます。
∟ Node.js（https://nodejs.org/en/）
∟ VisualStudioCode（https://code.visualstudio.com/）

2) 作業ディレクトリの作成
任意の場所へ作業用のディレクトリを作成/移動します。

mkdir webpack_test
cd webpack_test

3) プロジェクトの初期化
以下コマンドにてpackage.jsonファイルを作成します。

npm init --yes

4) webpackのインストール

npm i -D webpack webpack-cli

5) エントリポイントの準備
モジュールを格納するディレクトリを作成し、その中に各モジュールをインポートするためJSファイルを作成します。

mkdir src
type nul > src/index.js

以上でインストールおよび準備は完了です。
続いて実際に、幾つかの簡単なJSをバンドルしていきます。

実操作

1) 以下簡単な文字列を返す関数を定義したJSファイル（モジュール）を2つ準備し、
先ほど作成した「index.js」へ、当該関数のインポート処理と画面描画処理を記述します。
▼foo.js

export function funcBar(){ return 'bar'; }

▼bar.js

export function funcBar(){ return 'bar'; }

▼index.js

// 関数「funcFoo」「funBar」をインポート
import { funcFoo } from "./foo";
import { funcBar } from "./bar";

function comp() {
  const divElem = document.createElement('div');

  const f = document.createElement('p');
  f.textContent = funcFoo(); // 関数「funcFoo」を実行
  divElem.appendChild(f);

  const b = document.createElement('p');
  b.textContent = funcBar(); // 関数「funcBar」を実行
  divElem.appendChild(b);

  return divElem;
}
document.body.appendChild(comp());

2) 以下のコマンドを実行し、上記ファイルをビルドします。

npx webpack

ディレクトリ「src」の同階層へ、「dist」ディレクトリと配下に「main.js」が生成されていれば成功です。

▼main.js　※通常は改行/インデント無しで出力されます。

(() => {
	"use strict";
	document.body.appendChild(function() {
		const e = document.createElement("div"),
			t = document.createElement("p");
		t.textContent = "foo", e.appendChild(t);
		const n = document.createElement("p");
		return n.textContent = "bar", e.appendChild(n), e
	}())
})();

3) 最後に上記「main.js」を読み込むHTMLファイルを作成し、画面確認します。
関数「funcFoo」「funBar」で定義した文字列が画面に表示されれば成功です。
▼index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>webpack導入</title>
</head>
<body>
  <script src="./main.js"></script>
</body>
</html>