Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

Webページの構成ファイルをまとめる、モジュールバンドラー「webpack」入門

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

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

 本連載では、HTML/JavaScript開発作業を効率化する、さまざまなツールやライブラリを紹介します。今回取り上げる「webpack」は、Webページを構成するさまざまなファイルを、依存性を解決しながらまとめる「モジュールバンドラー」です。JavaScriptの依存性解決ができるほか、画像ファイルやCSSなど、さまざまな種類のファイルを処理できるwebpackの利用法を、第9回と第10回の2回にわたって説明します。

目次

はじめに

 一般的にWebページは、HTMLファイル以外にJavaScriptやCSS、画像など、複数のファイルから構成されます。ファイル数が多くなってくると、構成ファイルの依存性を正しく管理することが難しくなります。

 webpackは、Webページを構成するファイルの依存性を自動的に処理してまとめるツールです。モジュールをまとめる(バンドルする)ことから「モジュールバンドラー」と呼ばれます。

 今回はwebpackの概要を説明したあと、コマンドラインからwebpackでJavaScriptモジュールをまとめる例を紹介します。また、webpackが対応する、JavaScriptモジュール形式についても説明します。

対象読者

  • Webページを構成する大量のファイルが把握できなくなった方
  • JavaScriptコードをモジュール分けしてスマートに記述したい方
  • 最近のJavaScriptモジュール事情を確認したい方

必要な環境の準備

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

 Node.jsのインストール後、リスト1のコマンドでwebpackがインストールされます。「-g」(または「--global」)オプションをつけると、特定のプロジェクトやフォルダにではなく、システム自体にインストールされます。

リスト1 webpackのインストール
npm install -g webpack

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

  • Windows 10 64bit版
  • Node.js v6.11.2 64bit版
  • webpack v3.5.1
  • Microsoft Edge 40.15063.0.0

参考:webpackはプロジェクトごとにインストールしたほうがよい?

 webpackの公式ドキュメントでは、リスト1のような(-gオプションを利用した)システム自体へのインストールは、プロジェクトによって異なるバージョンを使い分けられなくなるため、推奨しないと記載されています。本記事ではコマンドラインで直接実行できるようにするため、リスト1のインストール方法を利用します。プロジェクトごとにインストールする利用法は次回の記事で説明します。


  • 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