解 説

webpackとは

webpackとはWebアプリを構成するリソースファイルをひとまとめにしてくれるものです。
例えば、複数のJavaScriptファイルだったり、CSSファイルもそうです。あるいは画像ファイルだったりします。
これらのファイルを全部1つのJavaScriptにまとめてしまうものです。
このような仕組みをモジュールバンドラーといいます。フロントエンドの世界では欠かせない存在になっています。
Reactを使う場合などは必需品と言っても良いでしょう。

  • モジュラーバンドラーの最大のメリットは複数に別れたJavaScriptの依存関係を解決してくれることです。
  • HTMLファイルから1つのJavaScriptを読み込むだけですので、リクエスト回数を減らすことができます。これは表示速度に大きく影響してきます。

webpack4の導入方法

Macでのターミナルを使用した導入の説明です。webpackのバージョンは4系です。

新規プロジェクトの作成

新規でプロジェクトフォルダを作成して、コマンド「cd」でカレントディレクトリを作成したプロジェクトフォルダに移動します。
その後、プロジェクトフォルダにpackage.jsonを作成します。コマンドは次の通りです。

package.jsonに記述する内容の確認が色々ありますが、package.jsonの内容は後ほどエディタで変更できますので、
全て「return」でOKです。
以上の操作で「package.json」ができます。

必要なパッケージをインストール

最新のwebpackと,webpack-cliのインストールをまとめて行います。

package.jsonに以下の記述が追加されています。バージョン番号はインストール時の最新バージョン[4.16.1](2018/7現在)

これでプロジェクトフォルダ内にnode_modulesフォルダができます。node_modulesフォルダには様々なファイルが格納されています。

Git管理する場合はnode_modulesフォルダを、「.gitignore」ファイルに登録してgit管理から外しておいた方が良いでしょう。

プロジェクトで使用するフォルダとリソースを用意

「distフォルダ」と「srcフォルダ」を作成します。「src」が原料置き場で「dist」が完成品置き場のようなイメージです。

  1. 「distフォルダ」にはデプロイするファイルが生成されて入ります。事前にindex.htmlを用意しておきます。
    index.htmlにはwebpackで自動生成されるmain.jsファイルを読み込むscriptタグの記述をしておきます。

    index.htmlコード

  2. 「srcフォルダ」にはwebpackでバンドルするためのリソースを用意します。
    今回は「myval.js」で定数を宣言しておいて「index.js」で読み込でconsole.log表示させるだけのシンプルな内容のものを用意しました。

    myval.js

    index.js

    webpackの既定では「srcフォルダ」の「index.js」がエントリーポイントであり、バンドル結果は「distフォルダ」に「main.js」ファイルとして生成されます。

    webpackの実行

    ここまでの設定で webpackの実行は次のコマンドです。

*ここでWARNING(警告)がでます。
「WARNING in configurationThe ‘mode’ option has not been set,〜」
オプションとしてmodeを指定しろというものですが、この警告は今のところ気にしないでも良いです。どうしても気になる場合は次のようにします。

「main.js」が「distフォルダ」に生成されたら「index.html」をブラウザの検証からconsole.logの確認をします。
名前が表示されたらうまくいきました。

webpack.config.js作成

もし、webpack既定の設定を変更したい場合は「webpack.config.js」ファイルを作成します。
このサンプルは既定の設定と同一の内容です。

「webpack.config.js」ファイルの例

「webpack.config.js」ファイルに従ってwebpackを起動するには次のコマンドを入力します。なお、—-watchオプションは編集を行って保存すると再コンパイルされます。

毎回長いコマンドを入力するのは面倒なので、package.jsonに次の記述を追加します。

ここまでの設定で起動するには次のコマンドです。

webpack-devサーバーの導入

webpack-devサーバーはwebpackと連動して動作する開発サーバーです。
devサーバーを導入するとコード変更をすると自動でビルドされてブラウザで確認できるようになります。

devサーバーのインストール

webpack.config.jsに以下を追加

devサーバーの起動を簡単にするためにpackage.jsonに「”start”:”webpack-dev-server –open”,」を追加します。

devサーバー起動のコマンドは次の通りです。
ブラウザが自動で開きます。

アドレスは「http://locahost:8080」です。

今後webpackで開発する場合は全て「npm start」で開始するようになります。

devサーバーの終了のショートカットキーは「control+c」です。