【JavaScript】webpackのインストール

「Node.jsのライブラリをフロントでも利用したい」
「requireで呼び出すライブラリがjsで動かない・・・」
「JavaScriptの依存関係がいろいろと面倒・・・」

このような場合には、webpackがオススメです。
この記事では、webpackについて解説しています。

本記事の内容

webpackとは？
webpackのシステム要件
webpackのインストール
webpackの動作確認

それでは、上記に沿って解説していきます。

webpackとは？

webpackは、JavaScriptのモジュールバンドラーです。
これだけでは、意味がわかりません。

簡単に言うと、複数のファイル（モジュール）からなるJavaScriptを集約します。
集約することにより、メリットが生まれます。

依存関係の問題から開放されます。
また、複数のjsファイルを読み込む必要がなくなります。
この結果、ページ表示の速度がUPすることもあるでしょう。

確かに、それだけでも効果が十分にあります。
しかし、個人的にはwebpackに感じる最大のメリットは以下になります。

Node.js向けのライブラリが、フロントでも機能するということです。
requireが記述されたコードを恨めしく思ったことはありませんか？

素晴らしい機能を持つライブラリが、Node.jsには多く存在します。
そして、普通はフロント（ブラウザで動くjs）でそれらの恩恵を受けれません。

しかし、webpackを使えば、その恩恵を受けることが可能なのです。
これが、webpackに感じる可能性と言えます。

以上、webpackについての説明でした。
次は、webpackのシステム要件を確認します。

webpackのシステム要件

現時点（2022年3月）でのwebpackの最新バージョンは、5.70.0となります。
この最新バージョンは、2022年3月3日にリリースされています。
更新度は、高めです。

システム要件で重要なことは、Node.jsがインストールされていることです。
そのため、Node.jsが動く環境なら基本的にはどこでも動きます。

UbuntuへのNode.jsのインストールについては、次の記事で説明しています。

そして、Node.jsはクロスプラットフォーム対応です。
したがって、webpackも以下を含むクロスプラットフォーム対応になります。

Windows
macOS
Linux

ただ、Node.jsのバージョンには注意が必要です。
npxコマンドを用いて、webpackを実行します。

そのため、npxを同梱するNode.jsである必要があります。
npxは、Node 8.2/npm 5.2.0以降で同梱されています。

つまり、Node 8.2/npm 5.2.0以降である必要があるということです。
これが最も注意べきシステム要件となります。

以上、webpackのシステム要件を説明しました。
次は、webpackのインストールを確認します。

webpackのインストール

webpackのインストールは、次の手順で行います。

ディレクトリ作成
npm初期化処理
webpackのインストール

それぞれを下記で説明します。

ディレクトリ作成

新規でディレクトリを作成します。

$ mkdir webpack-demo

今後は、作成したディレクトリ上で作業を行います。

npm初期化処理

作成したディレクトリに移動します。

$ cd webpack-demo

ディレクトリに移動したら、npm初期化処理を行います。
初期化するには、次のコマンドを利用します。

npm init -y

初期化のコマンドを実行した結果は、以下。

$ npm init -y
Wrote to ●●●/webpack-demo/package.json:

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" &amp;&amp; exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

この時点でのディレクトリ状況は、以下。

$ tree
.
└── package.json

0 directories, 1 file

初期化処理で作成されたpackage.jsonのみが存在しています。

webpackのインストール

場所は作成したディレクトリのままで、webpackのインストール作業を行います。
webpackをインストールするコマンドは、以下。

npm install webpack webpack-cli --save-dev

webpackのインストールコマンドを実行した結果は、以下。

$ npm install webpack webpack-cli --save-dev

added 120 packages, and audited 121 packages in 20s

17 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

ディレクトリの状況を確認すると、次のようになっています。
第1階層のみ表示。

$ tree -L 1
.
├── node_modules
├── package-lock.json
└── package.json

1 directory, 2 files

以上、webpackのインストールを説明しました。
次は、webpackの動作確認を行います。

webpackの動作確認

ディレクト場所は、そのままとします。
webpackの動作確認を行うには、手順を踏む必要があります。

事前準備
webpackによるビルド
ブラウザによる動作確認

それぞれを下記で説明します。

事前準備

webpackの動作確認を行うために、必要なモノを準備していきます。

ディレクトリ
ファイル
ライブラリ

ディレクトリ

以下のディレクトリを作成します。

src
dist

srcには、ソースとなるファイルを設置します。
distに、webpackでビルドしたファイル（js）が保存されます。

ファイル

それぞれのディレクトリに次のファイルを設置します。

src/index.js

import _ from 'lodash';

function component() {
    const element = document.createElement('div');
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    return element;
}
document.body.appendChild(component());

dist/index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Getting Started</title>
    </head>
    <body>
        <script src="main.js"></script>
    </body>
</html>

あと、package.jsonを修正しておきます。
修正内容は、以下。

- "main": "index.js",
+ "private": true,

「”main”: “index.js”,」を削除して、「”private”: true,」を追加します。
修正後のpackage.jsonは、以下となります。

package.json

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" &amp;&amp; exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.70.0",
    "webpack-cli": "^4.9.2"
  },
  "dependencies": {
    "lodash": "^4.17.21"
  }
}

ライブラリ

必要なライブラリをインストールします。
今回は、lodashをimportするようにコーディング済みです。

そのため、以下のコマンドでlodashをインストールします。

npm install --save lodash

上記を実行した結果は、以下。

$ npm install --save lodash

added 1 package, and audited 122 packages in 2s

17 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

ここで追加されたパッケージも一緒にバンドルされることになります。
また、package.jsonに「lodash」との依存関係が記載されています。

package.json

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" &amp;&amp; exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.70.0",
    "webpack-cli": "^4.9.2"
  },
  "dependencies": {
    "lodash": "^4.17.21"
  }
}

webpackによるビルド

準備事前が終わった時点でにおけるディレクトリの状況は、以下。
なお、node_modulesは除外しています。

$ tree -L 2 -I node_modules
.
├── dist
│   └── index.html
├── package-lock.json
├── package.json
└── src
    └── index.js

では、webpackによるビルドを行います。
ビルドには、次のコマンドを利用します。

npx webpack

ビルドのコマンドを実行した結果は、以下。

$ npx webpack
asset main.js 69.5 KiB [emitted] [minimized] (name: main) 1 related asset
runtime modules 1010 bytes 5 modules
cacheable modules 532 KiB
  ./src/index.js 220 bytes [built] 
  ./node_modules/lodash/lodash.js 531 KiB [built] 

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

webpack 5.70.0 compiled with 1 warning in 2949 ms
webpack-demo $ ls

警告が出ていますね。
開発or本番を決めてmodeに設定する必要があるようです。
今回の動作確認では、無視しても問題ありません。

ビルド実行後のディレクトリ状況を確認します。

$ tree -L 2 -I node_modules
.
├── dist
│   ├── index.html
│   ├── main.js
│   └── main.js.LICENSE.txt
├── package-lock.json
├── package.json
└── src
    └── index.js

distにそれらしきモノが作成されています。
ここまでより、ビルドまでの動作確認はOKです。