【React入門10】ローダーでJSファイル以外もバンドルする

こちらの記事は、React入門チュートリアルです。

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

ローダーとは

標準設定のwebpackはJavaScriptファイルのバンドルしか行うことができません。
（バンドルって？という方は前回の記事をご覧ください）

そこでwebpackに用意されたローダーをインストールすることによって、あらゆるファイルをwebpackでバンドルできるようにしましょう。

txtファイルをバンドルするためのraw-loader

まずはtxtファイルをバンドルするためのraw-loaderをインストールして使ってみましょう。

$ npm install --save-dev raw-loader

次にraw-loaderをwebpack.config.jsにも設定します。

webpack.config.js

const path = require('path');

module.exports = {
    watch: true,
    mode: 'development',
    entry: './src/index',
    output: {
        path: path.resolve(__dirname, 'public'),
        filename: 'bundle.js'
    },
  // 以下を追記
    module: {
        rules: [
            {
                test: /\.txt$/,
                use: 'raw-loader'
            }
        ]
    }
};

また、src/components/module.jsの拡張子をtxt形式に変えましょう。

(旧) src/components/module.js
(新) src/components/module.txt

最後にsrc/index.jsを改変します。
src/index.js

import Module from './components/module.txt'; 　//拡張子を変更

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

root.innerHTML = Module;

webpackがwatchモードになっている場合はリロードを、
なっていない場合はもう一度

$ npm run webpack

をします。

そうするとブラウザ上でmodule.txtがtxt形式で出力していることが分かりますね。

JSX、ECMAScriptのファイルをバンドルするためのbabel-loader

先ほどのraw-loaderのように、JSX形式、ECMAScript形式のファイルをバンドルするためのbabel-loaderというものがあります。

ReactはJSXやECMAで記述されることが多いため、babel-loaderも必須アイテムの1つでしょう。

それではbabel-loaderの導入手順を進めていきましょう。

まずは必要なパッケージのインストールを行います。

$ npm install -D babel-loader @babel/core @babel/preset-env webpack

次にwebpack.config.jsに対して、先ほどのraw-loaterの時と同じように追記します。

// 省略
    module: {
        rules: [
            {
                test: /\.txt$/,
                use: 'raw-loader'
            },
　　　// 以下を追記
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                  loader: 'babel-loader',
                  options: {
                    presets: ['@babel/preset-env']
                  }
                }
              }
        ]
    }
// 省略

これでJSX、ESMAScriptのファイルが読み込めるようになりました。