webpackとは
webpackとは、HTMLやCSS、JavaScriptなどWEBサイトやWEBアプリを構成するファイルを1つにまとめてくれるツールです。
ファイルを1つにまとめることで、たくさんのメリットがあります。
① HTTP通信の高速化
HTTP通信では、ブラウザとサーバーの同時接続数が限られるため、接続回数が増えれば、ファイルの転送にそれだけ時間がかかります。
そこで、ファイルを1つにまとめることで、サーバーとの接続回数を少なし、ファイルの転送時間を減らすことができます。
②保守性が上がる
これまでのJavaScriptファイルは全てのファイルをHTMLに<script>を使い書かなければいけませんでした。そのため、読み込みが遅く、かつ可読性に優れない状況でした。
webpackでは、ECMAScript標準の公式機能であるES Modules（import文）が使え、さらにnode.jsのモジュール機能（require文）が使えるために、ファイル同士を結合できます。
モジュールを使えることで、コードの可読性が上がり、開発作業の分担やテストがしやすくなり、再利用性や保守性が上がります。
その他にもたくさんのメリットがありますが、ここでは割愛します。
参考：webpackを使う理由
webpackの使い方
Node.jsのインストールが済んでいることが前提で進みます。
webpack公式のデモンストレーションに沿って始めます。
以下のコマンドを入力し、ディレクトリを作ります。
$ mkdir webpack-demo
$ cd webpack-demo
$ npm init -y
$ npm install webpack webpack-cli --save-dev
・1行目でプロジェクトを行うwebpack-demoディレクトリを作成しています。このディレクトリの名前はなんでも大丈夫です。
・2行目は、1行目で作成したwebpack-demoディレクトリに移動しています。
・3行目は、初期化処理を行い、package.jsonを生成しています。
npm initを行うと普通はどういうパッケージにするか質問がされるのですが、-yオプションを作ることで、すべてyesの回答となり、その質問を省略することができます。
・4行目で、webpackとwebpack-cliのインストールを行っています。
--save-devオプションをつけることで、package.jsonのdevDependenciesにwebpackとwebpack-cliのバージョン情報を書き込んでいます。
以上で準備が完了しました。
続いて、バンドルをするために、ディレクトリ構造とファイル、それらの中身を作成します。
webpack-demo
|- package.json
|- webpack.config.js
|- /src
|- index.js
|- sub.js
|- /node_modules
以上のようなディレクトリ構造を作るため、下記のコマンドを入力してください。
$ touch webpack.config.js
$ mkdir src
$ touch ./src/index.js
$ touch ./src/sub.js
・1行目は、webpackの設定をするファイルを作成しています。
・2行目は、srcディレクトリを作成します。このディレクトリの中にあるファイルがバンドルされます。
・3、4行目は、バンドルするファイルを作成しています。
これでディレクトリ構成が完成しました。
続いて、ファイルの中身を編集していきます。
まずは、webpackの設定をするためにwebpack.config.jsに以下のように書き込んでいきます。
module.exports = {
//エントリーポイントの設定
entry: `./src/index.js`,
// 出力するファイルの設定
output: {
// 出力するファイルのディレクトリ名
path: __dirname + `/dist`,
// 出力するファイルの名前
filename: "main.js"
},
//modeの設定
mode: "development"
};
・entry:は、アプリケーションのバンドル処理を開始するポイントの設定です。index.jsはsub.jsのモジュールに依存しますが、最終的なエントリーポイント（HTML等が読み込むポイント）はindex.jsであるので、そのindex.jsを設定しています。
・output:は、出力するファイルの設定をします。path:が出力するファイルのディレクトリ名で、filename:が出力するファイルの名前です。
今回は出力ファイルをmain.jsと設定します。
・mode:はモード設定で、development（開発モード）とすることで、出力されるmain.jsが見やすい形で出力されます。
modeをproductionにすると、圧縮され見づらくなりますがその分、高速に読み取りができるようになります。
参考：webpackの構成設定
続いて、そのバンドルしたいindex.jsとsub.jsの中身を書いていきます。
今回は単純に、関数モジュールファイルとそのモジュールを実行するファイルに分けます。
// greet関数をexportする。
module.exports = function greet() {
document.write("Hello webpack");
}
// require文を使ってsub.jsファイルを読み込む。
const greet = require('./sub');
// sub.jsに定義されたgreet関数を実行する。
greet();
それでは、いよいよwebpackの出番です。
以下のコマンドを入力してください。
$ npx webpack
すると、以下のように表示され、バンドルが完了します。
出来上がったmain.jsファイルを見てみるとよくわからない文字が出ていますが、これでバンドルされたファイルの完成です。
続いて、このバンドルされたファイルをhtmlで表示してみましょう。
以下のように./distディレクトリ内にhtmlファイルを作成します。
$ touch ./dist/index.html
続いて、index.htmlファイルの中身を記述していきます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div></div>
<script text="text/javascript" src="main.js" charset="utf-8"></script>
</body>
</html>
できあがったら、ブラウザでindex.htmlファイルを見てみましょう。
Hello webpack と表示されていたら成功です。
続きの画像やcssをバンドルする方法は、以下のURLをご覧ください。
https://webpack.js.org/guides/asset-management/
webpackの使い方の振り返り
① webpackのインストール
② webpackの設定ファイルを書き込む
③ webpackを実行する。
④ バンドル成功
【参考】
webpack で始めるイマドキのフロントエンド開発
最新版で学ぶwebpack 4入門 JavaScriptのモジュールバンドラ