【React入門⑨】webpackを使ってファイルをバンドルしよう

f:id:nekorokkekun:20190905143703p:plain:w1000
こちらの記事は、React入門チュートリアルです。

Reactが初めての私がReactを実装していく流れとなるため、初心者の方のつまずきやすいポイントを一通りフォローアップできる内容となっています。

webpackとは
webpackを使ってみる
- webpackをwatchモードにしてみる

webpackとは

webpackは「モジュールバンドラー」です。主な目的はブラウザで使うためにJavaScriptファイルをバンドルすることですが、様々なリソース・アセットを変換、バンドル、パッケージ化することも可能です。

とのこと。

具体的な使い道としては、

これまで以下のように記述して読み込んでいたファイルを…

<script src='src/app.js'></script>
<script src='src/feature.js'></script>

このような形で別ファイルとしてまとめ（バンドルし）することができるのです。

<script src='src/bundle.js'></script>

webpackによるバンドルの利点は、依存しあったファイルどうしの順序を気にせず、ソースとして読み込むことができるということです。

先ほどの例でapp.jsの中にfeature.jsを読み込む箇所があった場合、以下のような順番で読み込まなければ読み込みエラーが出てしまいます。

<script src='src/feature.js'></script>
<script src='src/app.js'></script>

ファイルが依存関係にあると、このように読み込み順を気にしなければならない点が厄介です。

webpackの場合、そのような読み込み順を気にしなくて済むように、必要なファイルをバンドルしてしまうことができるため便利なのです。

webpackを使ってみる

早速webpackを使ってみましょう。

まずsrc/componentsの中にmodule.jsを作成しましょう。

src/components/module.js

const text = '<p>Good Morning Sunsine!</p>';

export default text;

次にmodule.jsに依存した形でindex.jsを書き換えましょう。

import Module from './components/module';

const root = document.querySelector('#root');

root.innerHTML = Module;

次にwebpackのインストールを行います。

$ npm install --save-dev webpack

ここでwebpack-cliのインストールをするかどうか尋ねられると思いますので「yes」と答えましょう。

次にpackage.jsonのscriptsに追記をします。
package.json

  "scripts": {
　// 省略
    "webpack": "webpack"
  },

続いてプロジェクト直下にwebpack.config.jsonを配置しましょう。
以下のような内容で保存します。

const path = require('path');

module.exports = {
    mode: 'development',
    entry: './src/index', // 読み込むファイル
    output: {
        path: path.resolve(__dirname, 'public'), //アウトプット先
        filename: 'bundle.js' //アウトプットするファイル名
    }
};

次に、先ほどpackage.jsonで設定したscriptsを使ってコマンドラインに以下のように入力しましょう。

$ npm run webpack

これで、public/bundle.jsが生成されました。
ファイルを見てみると、89行目からバンドルされた異なったファイルが形式で記載されています。

最後に呼び出し元であるindex.htmlから、bundle.jsを呼び出しましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>Reactチュートリアル</title>
  </head>
  <body>
    <div id="root"></div>
    <script src='bundle.js'></script> //追記
  </body>
</html>

これで、webpackを導入する以前と同じような画面表記になっているはずです。

試しにmodule.jsとindex.jsのコードを削除してみましょう。
それでもbundle.jsに2つのファイルがバンドルされて記述されていますので、画面は消えませんね！

webpackをwatchモードにしてみる

webpackをwatchモードにすることによって、すでにバンドルされているファイルでも編集すれば描画に反映されるようになります。

方法はとても簡単です。以下のファイルに1行追加しましょう。
webpack.config.js

// 省略
module.exports = {
    watch: true, //追記
    mode: 'development',
    entry: './src/index',
    output: {
        path: path.resolve(__dirname, 'public'),
        filename: 'bundle.js'
    }
};

そして、もう一度ターミナルからコマンドを入力します。