Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

モジュールバンドラーwebpackの設定を調整して、より実践的に使いこなそう

HTML/JavaScript開発作業を効率化する便利ツールの活用 第10回

  • LINEで送る
  • このエントリーをはてなブックマークに追加

 本連載では、HTML/JavaScript開発作業を効率化するさまざまなツールやライブラリを紹介します。前回は、モジュールバンドラーwebpackの基本的な利用法と、webpackで処理できるJavaScriptモジュール形式を説明しました。今回は、Node.jsのプロジェクトにwebpackを設定して、画像やCSSの処理、JavaScriptの変換などを行う方法を説明します。

目次

はじめに

 webpackは、Webページを構成するJavaScriptや画像、CSSなどのファイルを、依存性を処理しながらまとめる「モジュールバンドラー」です。前回記事では、webpackをシステム全体にインストールして、コマンドライン実行でJavaScriptのモジュールをまとめる方法を紹介しましたが、現実的には、webpackをNode.jsのプロジェクト単位でインストールして利用することが多くなります。本記事では、まずwebpackをNode.jsのプロジェクトで利用する方法を説明します。

 webpackでは、「ローダー」や「プラグイン」といった追加機能を利用して、画像やCSSの処理、JavaScriptの変換や最小化、開発用Webサーバーの実行など、さまざまな処理を行えます。本記事の後半では、こうしたwebpackの活用法も紹介していきます。

対象読者

  • Webページを構成する大量のファイルが把握できなくなった方
  • webpackでJavaScript以外のファイルも管理したい方
  • とにかく自動化できることは自動化したい方

必要な環境の準備

 webpackの実行にはNode.jsが必要です。公式サイトからダウンロードのうえ、インストールしてください。

 今回は以下の環境で動作を確認しています。

  • Windows 10 64bit版
  • Node.js v6.11.3 64bit版
  • webpack v3.5.6
  • Microsoft Edge 40.15063.0.0、Internet Explorer 11

 今回は、前回説明したサンプルコードを一部流用して説明していきます。実装内容の詳細は前回の記事も参照してください。Node.jsのプロジェクトでは、「npm init」コマンドでプロジェクトの設定ファイル(package.json)を生成します。今回のサンプルコードには、生成済みのpackage.jsonを含めています。

webpackをプロジェクトで実行する基本設定

 最初に、図1のサンプル(001-basic)で、webpackをプロジェクトで実行する基本的な設定方法を説明します。実装内容は前回のサンプル(001-commonjs)と同じです。

図1 webpackを利用するサンプル(001-basic)
図1 webpackを利用するサンプル(001-basic)

 Node.jsプロジェクトにwebpackをインストールするには、リスト1のコマンドを実行します。「--save-dev」は、インストールするパッケージを開発用に利用することを表すオプションで、package.jsonのdevDependencies要素にパッケージが記録されます。

リスト1 webpackをプロジェクトにインストールするコマンド
npm install --save-dev webpack

 次に、package.jsonにリスト2の通り記述して、「npm run build」コマンドでwebpackが実行できるようにします。

リスト2 webpackを実行する記述(001-basic/package.json)
"scripts": {
  "build": "webpack"
},

 webpackの設定ファイルwebpack.config.jsを作成します。このサンプルではリスト3のようにします。entry(1)にwebpackの入力ファイル、output(2)に出力ファイルを、それぞれ指定します。

リスト3 webpackの設定ファイル(001-basic/webpack.config.js)
module.exports = {
    entry: "./index.js",      // 入力 ...(1)
    output:{
        filename: "bundle.js" // 出力 ...(2)
    }
};

 リスト1~3の設定後、コマンドラインで「npm run build」を実行すると、リスト3(1)のentryに指定したindex.jsを入力として、webpackが依存するファイルをまとめて(バンドルして)、リスト(2)のoutputに指定したbundle.jsに出力します。

図2 「npm run build」実行時のコマンドライン表示(001-basic)
図2 「npm run build」実行時のコマンドライン表示(001-basic)

webpack.config.jsのさまざまな設定

 ここからは、webpack.config.jsの設定例をいくつか説明します。

入力/出力ファイルのパスを指定

 入力ファイル、出力ファイルのパスを指定したい場合は、リスト4(1)のcontextで入力ファイルのパス、(2)のpathで出力ファイルのパスを指定します。__dirnameは、プロジェクトのルートフォルダーを表す定数です。

リスト4 入出力パスの設定(002-path/webpack.config.js)
module.exports = {
    context: __dirname + "/js_src", // 入力ファイルのパス ...(1)
    entry: "./index.js",
    output:{
        path: __dirname + "/js",    // 出力ファイルのパス ...(2)
        filename: "bundle.js"
    }
};

複数の入力ファイルから複数の出力ファイルを生成

 複数のJavaScript入力ファイルをそれぞれバンドルしたい場合は、リスト5(1)のように、名前(ここではpage1、page2)と、対応するJavaScriptファイル名を複数指定します。出力ファイル名の指定は(2)です。名前が(2)の[name]に代入されて「bundle.page1.js」「bundle.page2.js」という出力ファイルになります。

リスト5 複数入力ファイルの設定(003-multi/webpack.config.js)
module.exports = {
    entry: { // 複数指定 ...(1)
        page1: "./index.js",
        page2: "./index2.js"
    },
    output:{
        filename: "bundle.[name].js" // 出力ファイル名 ...(2)
    }
};

 (2)の出力ファイル名には表1に記載されているパラメーターが指定できます。

表1 出力ファイル名に指定できるパラメーター
パラメーター 意味
[name] entryで指定した名前
[id] 通し番号(0,1,2,...)
[hash] ランダム文字列(プロジェクト内で同一)
[chunkhash] ランダム文字列(出力ファイルごとに異なる)

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2017年5月時点での登録メンバは52名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂き...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:HTML/JavaScript開発作業を効率化する便利ツールの活用

もっと読む

All contents copyright © 2005-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5