最近はフロントエンドの開発において様々なツールが用いられるようになってきましたが、webpackもそのうちの一つです。今回はこのwebpackを使って、導入・セットアップから複数のjavascriptファイルをバンドルさせて、一つのファイルにまとめる方法についてまとめていきたいと思います。   webpackでは、それぞれのjavascriptファイルをモジュールと定義し、バンドルさせて最終的に1つのファイルで扱うことにより、パフォーマンスとメンテナンス性の向上を目的としています。また、javascriptファイル以外にも、cssや画像ファイルなどもバンドルさせることも可能です。   今回は導入部分と基本的な範囲となりますが、まずはこの内容でも始められると思いますので、さらに詳細の内容については別記事でまとめていきたいと思います。  

webpackのインストールとセットアップ

前提としてwebpackを使うためには「node.js」が必要になります。またバージョンもv.8.x以上が必要となりますのであらかじめ準備しておきます。node.jsのインストールについてはこちらの記事「Node.jsのバージョン管理をnodebrewで行う」をご覧ください。   まずは下記コマンドでインストールしていきますが、基本的にはグローバルではなくプロジェクトごとにインストールして使います。その時には事前に「npm init」で「package.json」ファイルを作成しておきます。   package.jsonが作成されたら「webpack」の本体とコマンドラインで使えるようにするため「webpack-cli」のモジュールもインストールしておきます。インストールが完了したらバージョンを表示させて確認します。

// グローバルにインストール
$ npm install -g webpack webpack-cli
$ webpack -v
$ webpack-cli -v

// ローカルにインストール
cd [PROJECT_DIRECTORY]
$ npm init -y
$ npm install --save-dev webpack webpack-cli
$ webpack -v
$ webpack-cli -v

   

フォルダ構成とjsファイルの準備

webpackのインストールが完了したら、webpackで使うためのファイルやディレクトリを準備していきます。今回は下記のような構成で進めていきます。

webpack.config.js
dest
  ┣ bundle.js
  ┗ index.html
src
  ┗ js
    ┣ entrypoint.js
    ┗ modules
      ┣ module_01.js
      ┣ module_02.js
      ┗ module_03.js

  まずはwebpackの設定ファイルである「webpack.config.js」を作成します。内容について詳しくは後述します。次に「src」フォルダにはそれぞれのjsファイルなどが入ります。「modules」フォルダ配下にはモジュールとなるjsファイルが、「entrypoint.js」はモジュールをまとめるためのファイルになります。そして「dest」フォルダ配下にバンドルされたjsファイルである「bundle.js」が出力される形になります。  

webpack.config.jsの作成

webpackの設定ファイルには下記のように出力の設定を中心に記述していきます。モードは開発用である「development」と本番用の「production」では出力形式が若干異なります。それぞれ用途に合わせて切り替えます。

module.exports = {
  // モードの指定（[development],[production],[none]）
  mode: 'development',
  // エントリーポイントのjsファイル指定
  entry: './src/js/entrypoint.js',
  output: {
    // 出力先パスの指定
    path: `${__dirname}/dest`,
    // 出力先ファイルの指定
    filename: 'bundle.js'
  }
};

  エントリーポイントとなるjsファイルの設定や、出力に関する指定はプロジェクトごとに適宜合わせていきます。  

エントリーポイント（entrypoint.js）の作成

モジュールのjsファイルをまとめるためのjsファイルになります。以下は最小の構成になりますが、プロジェクトごとに内容は変わります。まずは、モジュールファイルとなるjsファイルをそれぞれインポートします。そしてモジュールとして定義された関数を実行します。

// モジュールとなるjsファイルのインポート
import module_01Js from './modules/module_01';
import module_02Js from './modules/module_02';
import module_03Js from './modules/module_03';

// モジュール先にある関数を実行
module_01();
module_02();
module_03();

   

各モジュール用jsファイルの作成

エントリーポイントのjsに記述された各モジュール用のjsファイルには「export default」で関数をモジュールとして定義させます。続けて関数の中にモジュールごとの処理を書いていきます。

// ./modules/module_01.js
export default function module_01() {
  // モジュールごとの処理を書く
  console.log('module_01');
}

// ./modules/module_02.js
export default function module_02() {
  // モジュールごとの処理を書く
  console.log('module_02');
}

// ./modules/module_03.js
export default function module_03() {
  // モジュールごとの処理を書く
  console.log('module_03');
}

   

webpackのビルド＆bundle.jsファイルの生成

それぞれのモジュールごとにjsファイルを作成したら、これらのファイルをwebpackでビルドすることでバンドルさせて1つのjsファイルにまとめていきます。ビルドは下記コマンドを実行します。

$ webpack

………
………
[./src/js/entrypoint.js] 110 bytes {main} [built]
[./src/js/modules/module_01.js] 31.1 KiB {main} [built]
[./src/js/modules/module_02.js] 109 KiB {main} [built]

  【./dest/bundle.js】※一部省略

/***/ "./src/js/entrypoint.js":
/*!******************************!*
!*** ./src/js/entrypoint.js ***!
******************************/
/*! no exports provided */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

〜 省略 〜

/***/ "./src/js/modules/module_01.js":
/*!******************************!*
!*** ./src/js/modules/module_01.js ***!
******************************/
/*! no exports provided */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

〜 省略 〜

/***/ "./src/js/modules/module_02.js":
/*!******************************!*
!*** ./src/js/modules/module_02.js ***!
******************************/
/*! no exports provided */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

〜 省略 〜

  ビルドが完了したら、指定した場所にモジュールがバンドルされたjsファイルの「bundle.js」が生成されます。その内容を確認すると上記のように、モジュールごとのコードが記載されているのが確認できます。  

bundle.jsをHTMLファイルで読み込む

生成されたjsファイルをHTMLファイルで読み込みます。それぞれのモジュールで記述した処理が実行されているかをコンソールなどで確認します。 【index.html】※一部省略

〜 省略 〜
………

    <script src="./bundle.js"></script>
  </body>
</html>

 

---

  いかがでしょうか、webpackを使うとで各ファイルが1つにまとめられるので、リクエスト数が減りサイトの高速化が期待できます。また、それぞれのファイルをモジュールとして管理できるようになるので、切り分けや追加もわかりやすいのでメンテナンス性にも優れます。   webpackは他にもいろんな機能があるのですが、これらがメインの機能となりますので、gulpなどのタスクランナーと併用することでメリットを活かしながらフロントエンド開発を進めることができます。   （参考にさせて頂いたサイト） webpack 4 入門