Allied ArchitectsAllied ArchitectsEngineer Blog

Webpackはどんなもの?

2017/12/1 未分類

はじめに

はじめまして、ベトナムから今年の1月に日本へ来て11ヶ月になるトアンです。趣味はサッカーやアニメを見ることです。
今回初めてエンジニアのブログを書くため緊張していますがよろしくお願いします。

最近、webpackというものが流行っているとのことで自分も触ってみました。

webpackの概要と基本的な使い方を紹介したいと思います。

参考リンク:tutorialzine.com

Webpackとは

Webpackとは、複数のファイルを1つにまとめてくれるものです。

最も多い使用の仕方は、JavaScriptファイルをバンドルすることですが、他にもcssや画像ファイルなどもまとめることができます。

まとめることでウェブページのHTTPリクエストの数を減らしたり、高度なウェブアプリケーションの開発に役立ちます。


(C)ics media

使い方

インストール

Macで開発環境の設定する方法を紹介します。

Macでwepackの開発環境を立ち上げるために、node.jsが必要なので、nodejsをインストールします。

グローバルでwebpackをインストールしたい場合は:

グローバルの場合、全ての環境に影響するためローカルでの導入をおすすめします。

ローカルでwebpackをインストールしたい場合は:

デモプロジェクトの作成

続いてデモプロジェクトを作成してみます。

まずは、プロジェクトフォルダと必要があるファイルを作成します。

プロジェクトの構造は以下の通りです。

Demo

インストール後、ファイルを以下のように編集します。

  • webpack.config.js

Entryは他のjsファイルを参照しているmainのjsファイルを記述する必要があります。
なのでrequire文やimport文が記述されているファイルをここに書きます。

Outputはjsファイルを一つにまとめて出力するファイルを記述します。
今回は/dist/bundle.jsがwebpackコマンドを実行することによってできます。

まとめるjsファイルは以下の通りです。

  • greeter.js

  • index.js

まとめたjsファイルを使用するhtmlは以下の通りです。

  • index.html

Demo

実施

コマンドを実行して、bundle.jsを作成します。

ブラウザでHTMLファイルを開くと、以下の結果となります。

結果

index.js(エントリーポイント)とgreeterモジュールはbundle.jsという1つのファイルにコンパイルされ、ブラウザによって実行されました。

bundle.jsファイルの内容は以下となります。

最後に

なんとなくwebpackについて理解していただけたでしょうか?

JSだけでなく、CSSの管理もできて、とても便利だと思います。

もっと知りたい方は以下の参考リンクに進んでみてください。

Webpackとは?

最新版で学ぶwebpack 3入門 – JavaScript開発で人気のバンドルツール

ページTOPへ