webpackについて調べてみた
webpackとは？
webpackとは、公式では以下のように紹介されています。（2022年6月時点）
基本的に、webpackは最新のJavaScriptアプリケーション用の静的モジュールバンドラーです。webpackがアプリケーションを処理するとき、1つ以上のエントリポイントから依存関係グラフを内部的に構築し、プロジェクトに必要なすべてのモジュールを1つ以上のバンドルに結合します。これは、コンテンツを提供するための静的アセットです。（公式）https://webpack.js.org/concepts/
つまり、ウェブコンテンツを構成するファイル（JSファイル、画像、フォント、スタイルシート）などをwebpackが読み込める形式（JSファイル）に変換した上で結合し、最適化するためのツールだと認識しています。
ではwebpackを導入することで開発的にどのようなメリットがあるのでしょうか。
具体的には、以下のようなメリットがあります。
webpackのメリット
①モジュールが使用できる
ウェブのフロントエンド開発で使用するJSモジュールには、標準仕様のECMAScript Modules（通称、ES Modules）や、Node.jsで旧来より用いられているCommonJS形式のモジュールなど、さまざまなモジュールの形式があります。webpackはどの形式にも対応しており、モジュールをバンドルする（1つにまとめる）ことができます。
また、一般的なJSライブラリはモジュール形式で提供されており、これも同様にwebpackで取り込めます。
つまり、webpackがモジュール形式にとてもであるおかげで、開発者はモジュールの依存関係をそこまで深く考慮しなくてもフロントエンドの開発を進められます。
②ウェブコンテンツの読み込み性能向上
ファイルを1つにまとめることはウェブコンテンツの読み込み性能向上に役立ちます。たとえば、HTTP/1.1接続ではブラウザとウェブサーバーの同時接続数が限られるため、複数のファイルの転送に時間がかかります。複数のJSファイルを1つにまとめることでウェブコンテンツの読み込み性能向上に役立ちます。
ページの読み込み速度が遅いとSEO的にマイナス評価をされる場合もある為、こちらの機能も大きなメリットと言えるでしょう。
参考
③フロントエンドの包括的な環境が整う
webpackなしで開発環境を揃えようとすると、ツールの組み合わせが無限にあるため、設定ファイルが複雑化しやすいです。しかし、webpackを使用することで、フロントエンドの開発に必要な技術を一式揃える事が出来ます。
webpackを導入しておけば、フロントエンドの開発に必要な技術を一式揃えられるのは大きなメリットと言えるではないでしょうか。
webpackの導入を試してみよう
webpackを使用するには、事前にNode.jsのインストールを行う必要があります。
webpackを導入したいが、Node.jsをインストールされていないという場合は、こちら公式からインストールしてください。（https://nodejs.org/ja/）
作業ディレクトリに移動し、npm init コマンドでpackage.jsonファイルを生成します。
# 作業ディレクトリを作成し、移動する
% mkdir webpack_test ~/
% cd ~/webpack_test
# package.jsonファイル作成の実行コマンド（デフォルト設定に合わせて-yオプションを追加してます）
% npm init y
次にwebpack本体をインストールします。
npm installはインストールの命令、-Dはインストール先をdevDependenciesにするための指定、webpackはその名の通りインストールする対象です。
# webpack本体をインストール
% npm install -D webpack webpack-cli
以上で、webpackを使用できる準備が整いました。
webpackの使い方
作業ディレクトリ配下にsrc/index.jsと任意のファイルを作成します。（ここではApp.js）
※webpackのエントリポイントは、デフォルトで読み込み先が./src/index.js、出力先が./dist/main.jsファイルに設定されている為、ファイルの作成方法に注意
% mkdir src
% touch index.js App.js
以下はディレクトリ構成のイメージです。
webpackによるビルドコマンドを実行します
% npx webpack
ビルド後は、以下のようにdistディレクトリ配下にmain.jsファイルが出力されます。
main.jsにはindex.jsの関数処理とindex.jsの関数処理が両方読み込まれている事が分かるかと思います。
試しに以下のコマンドを実行して動作を確認してみましょう
% node ./dist/main.js
正常に動作すれば、ターミナルに実行内容が表示されるはずです。
webpack.config.jsによる設定
webpack.config.jsというファイルを作成して設定をカスタマイズできます。
基本的な設定項目としては、以下などがあります。
- entry（起点となるファイル名）
- outPut（出力情報）
-
mode （ビルド時の動作モードを設定。）
- development: デバッグしやすい状態に設定
- production: ファイルサイズを最小限にする設定（デフォルト設定）
以下はwebpack.config.jsの例です
const path = require('path');
module.exports = {
// モードの設定
mode: 'development',
// エントリーポイントの設定
entry: `./src/index.js`,
// ファイルの出力設定
output: {
// 出力するファイル名
filename: "bundle.js",
// 出力先のパス
path: path.join(__dirname, 'dist')
}
};
その他有名な設定内容として、loaders（画像、CSSといったJS以外のファイルをJSで扱えるように変換したり、各ファイルに対してバンドル前に処理を実行する機能）などがありますが、こちらは、以下の記事でとても理解しやすく書かれていると感じました。
もし、気になった方は参考にしてみると良いと思います。
Discussion