webpackを使ってjavascriptファイルをバンドルさせる | 大阪市天王寺区SOHOホームページ制作 | デザインサプライ-DesignSupply.-
0%

Programmingプログラミングナレッジ

Posted:2018.05.29

webpackを使ってjavascriptファイルをバンドルさせる

最近はフロントエンドの開発において様々なツールが用いられるようになってきましたが、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 入門

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】