webpack入門その1（JavaScriptファイルをバンドルする）

今回はフロントエンドで近年ほぼ必須となっているwebpackについて基本的な使い方を紹介する。

ただし一気に全部紹介してしまうと、初見では意味がわかりづらい横文字も多く読んでいくうちによくわからずに挫折しかける人も多そうなのでシンプルにJavaScriptファイルをバンドルするところまでやる。

今回の対象読者

webpackを試してみたい人
JavaScriptの基礎を把握している人

前提条件

PCにバージョン6.11.5以上のNode.jsインストール済みであること

今回使用した動作環境

Windows10 Home Version1903の

Ubuntu 18.04 LTS（WSL1）

サンプルコード

github.com

webpackって？

一言でいえばJavaScriptなどのファイルをまとめてくれるツールです。こうしたまとめ機能を持つモジュールバンドラと呼ばれるツールの一つに分類されます。複数のライブラリ/モジュールや機能を使うアプリケーションの開発で効力を発揮してくれます。

webpack.js.org

使用する上で覚えた方がいい用語

webpackを使う上で最低限覚えるべき用語は以下のとおり。

用語	意味
モジュール	JavaScriptやCSSなどwebpackでまとめられるファイル
バンドル	webpackでまとめられたファイル
バンドルする	〇〇をまとめる
ビルド	バンドルを出力するまでの処理

主なメリット

バンドルすることでWebページを表示する際のリクエスト数を減らして、表示速度を上げる事ができる*1
バンドルしたファイルを読み込むだけでいいので、複数のモジュールを記載する必要がなくなり可読性が向上する*2

webpackのインストールから実際にバンドルするまで

詳細まで細かく記載するとブログ記事の範疇を超えてしまうので長くなるので、筆者が実際に行った手順を備忘録として以下のURLにのせておきました。上述のサンプルコードを使用しています*3。

https://miily8310s.github.io/webpack-kihon/#/

本記事では要点だけ紹介します。基本的な流れは以下のとおりです。それぞれ説明していきます。

webpackをnpmでインストール
サンプルコードの準備
設定ファイル（webpack.config.js）を作成する
実際にバンドルしてみて動作確認する

1.webpackをnpmでインストール

使用するpackage.jsonが存在している状態で、以下のコマンドを入力する。インストールする際はwebpackだけでなくwebpack-cliも必要です。

npm i webpack webpack-cli --save-dev

または

yarn add webpack webpack-cli --save-dev

2. サンプルコードの準備

今回は以下のディレクトリで進めます。

    ･
    ├── node_modules
    ├── package.json
    ├── package-lock.json*
    ├── public
    |   ├── index.html
    |   └── js
    |       └── bundle.js
    └── src
        └── js
            ├── app.js
            └── modules
                ├── celsius.js
                └── fahrenheit.js

*yarnコマンドで進める際はyarn.lock

バンドルするJavaScriptファイルを作成し、celsius.jsとfahrenheit.jsからエクスポートした関数をapp.jsでインポートします。

celsius.js

export default function celsius(number) {
  return number;
}

fahrenheit.js

export default function fahrenheit(number) {
  return number * (9 / 5) + 32;
}

app.js

import celsius from './modules/celsius';
import fahrenheit from './modules/fahrenheit';

const celsTemp = celsius(26);
const fahrTemp = fahrenheit(35);

document.body.innerHTML = `<p>${celsTemp} ${fahrTemp}</p>`

celsius.jsとfahrenheit.jsは摂氏・華氏をそれぞれ出力するコードです。app.jsはhtmlにその摂氏・華氏をpタグで出力するコードです。

3. 設定ファイル（webpack.config.js）を作成する

webpackの設定用ファイルのwebpack.config.jsを作成します。

# webpack.config.js
const path = require("path");

module.exports = {
  mode: "development",
  entry: "./src/js/app.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "public/js"),
  },
};

設定項目の意味は以下の通りです。

mode：モードを開発用もしくは本番用
entry：バンドルするファイルを指定
output：出力するディレクトリ・ファイル名を指定

出力されるbundle.jsをindex.htmlで指定します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>webpack-sample</title>
  </head>
  <body>
    <script src="js/bundle.js"></script>
  </body>
</html>

4.実際にバンドルしてみて動作確認する

package.jsonのscriptにbuildがあり、そのbuildにwebpackコマンドが指定されていることを確認し、以下のコマンドを入力してください。

npm run build

するとwebpackが動作して、コマンドに以下のようなものが流れてきます。

> after@1.0.0 build /home/××/blog_sample/Webpack_sample/after
> webpack

Hash: 96f1c1c3120c5dbf936c
Version: webpack 4.43.0
Time: 57ms
Built at: 06/26/2020 11:12:29 AM
    Asset      Size  Chunks             Chunk Names
bundle.js  5.56 KiB    main  [emitted]  main
Entrypoint main = bundle.js
[./src/js/app.js] 212 bytes {main} [built]
[./src/js/modules/celsius.js] 61 bytes {main} [built]
[./src/js/modules/fahrenheit.js] 79 bytes {main} [built]

これでindex.htmlを開いてみると摂氏・華氏が出力された状態で表示されているはずです。

参考書籍

www.amazon.co.jp

おそらく自分が読んだ中でこれが一番わかりやすかった。サンプルコードがシンプルかつ短いので読みやすい。Kindle Unlimitedの加入者は無料。

次回は未定ですが、Pythonでそろそろコーディング問題を練習していきたい気持ちなので、leetcodeの記事でも書こうかなと。

（2020/07/02 追記） leetcodeの記事作ろうと思ってたけど、easyかつgood率が5割以上超えているProblems解くだけで十分ですこれ。introductionはやらなくてもいい。ただしこの手のコーディングテストでよく使う文法のまとめを近日記事にすることは考えてる。 webpackの続編はしばらく書く予定はありません。discord.jsでのdiscord bot作成中なので次はdiscord.jsの記事にする予定です。

*1:Webページを表示するときにはJavaScriptとかCSSファイルが転送されるが、転送するファイルの数が増えるとその分表示が遅くなってしまう欠点がある

*2:モジュールが多くなるほど読み込むためのhtmlのscriptタブが増えてしまうからね

*3:複数の記事に分けてもよかったけど、いっそこちらでドキュメントサイト作ったほうが見やすいかなと。あと続編の記事も同サイトに載せたかったのも

きままに記録箱

フロントエンドたまに他のはなし