【React入門11】プラグインを導入してhtmlファイルを生成する

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

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

プラグインとは？

前回の記事で紹介したローダーは、webpackの拡張機能の1つですが、他にもプラグインという拡張機能があります。

この2つの違いとして…

  • ローダーはモジュールに対して作用
  • プラグインはバンドルファイルに対して作用

という点を挙げることができます。

ちなみにwebpackでバンドルを行なった際に以下のようなコマンドを入力しました。

$ $ npm run webpack

これに -pオプションをつけることでアウトプットされるファイルは圧縮され、ファイルサイズが小さくなります。

$ npm run webpack -p

これも実は、UglifyJsPluginというプラグインを使用しているのです。意外と導入が簡単そうですね。

また、他のプラグインを導入する際にはwebpack.config.jsにpluginsプロパティを作成し、その中に導入したいプラグインを記述するだけです。

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'
            },
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env', 'react']
                    }
                },
                exclude: /node_modules/
            }
        ]
    }
};

プラグインの導入

それでは他のプラグインを導入していきましょう。
導入してくれるプラグインは「HtmlWebpackPlugin」です。
これは「HTMLのテンプレートを自動的に作成してくれるプラグインの作成」をしてくれるものになっています。

まずはプラグインのインストールからです。

$ npm install --save-dev html-webpack-plugin

次にpublic/index.htmlを削除します。

webpack.config.jsを以下のように記述します。

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); //追記

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'
            },
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                  loader: 'babel-loader',
                  options: {
                    presets: ['@babel/preset-env']
                  }
                }
              }
        ]
    },
    plugins: [
        // プラグインの設定追加
        new HtmlWebpackPlugin({
            title: 'Plugin generate page',
            template: 'src/root.html'
        })
    ]
};

ちなみにrequireとimportの違いについては、こちらのQiita記事がまとまっていてわかりやすかったため、参考にしてみてください。
qiita.com

先ほどの設定を少し説明します。

        plugins: [
            // プラグインの設定追加
            new HtmlwebpackPlugin({
                title: 'Plugin generate page', // 生成するHtmlファイルの名前
                template: 'src/root.html' // 後ほど用意するhtmlファイル。これを元に生成される
            })
        ]

src/root.htmlを作成しましょう。

<!DOCTYPE html>
<html lang='ja'>
    <head>
        <meta charset="UTF-8">
        <title><%= htmlWebpackPlugin.options.title %></title>
    </head>
    <body>
        <div id='root'></div>
    </body>
</html>

最後にwebpackをビルドしてみましょう。

$ npm run webpack

そうすると、publicディレクトリにindex.htmlが生成されています！
public/index.html

<!DOCTYPE html>
<html lang='ja'>
    <head>
        <meta charset="UTF-8">
        <title>Plugin generate page</title>
    </head>
    <body>
        <div id='root'></div>
    <script type="text/javascript" src="bundle.js"></script></body>
</html>