webpack

【webpack】HTMLファイルを自動生成する[html-webpack-plugin]の使い方

html-webpack-pluginの使い方について知りたい
html-webpack-pluginって何のために使うの?

以上の疑問の解決記事です。

 

本来のdist・srcの役割

dist/配下ファイルは、「バンドル後生成されるファイルの出力先」で、本来編集するものではありません。

※個人開発なら良いが、複数人で開発を進める際、どのファイルを編集して良いか分からなくなるため。

したがって、src/配下ファイルを編集して、バンドルさせたdist/配下ファイルをブラウザで確認するスタイルにします。

dist/ 編集しない(生成後ファイルが出力される)
src/ 編集する

 

そこで必要になるのが、本記事で紹介する「html-webpack-plugin」です。

 

 

html-webpack-pluginを使う

 

html-webpack-pluginとは?

HTMLファイルを、dist/配下に生成するプラグインです。説明を見るより、実際にインストールしていきましょう。

 

html-webpack-pluginをインストール

下記コマンドでインストールします。

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

 

 

package.jsonを確認

正常にインストールされたか、package.jsonを確認しましょう。

//package.json

{
  "scripts": {
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^6.5.1",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.5.0", //追加
    "mini-css-extract-plugin": "^2.4.5",
    "node-sass": "^7.0.1",
    "sass-loader": "^12.4.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1"
  }
}

 

追加を確認できればOK

 

 

webpack-config.jsの設定を追加する

続いて、webpack-config.jsに設定を追加します。

//webpack-config.js


const MiniCssExtractPlugin = require('mini-css-extract-plugin');
//ここから追加
const HtmlWebpackPlugin = require('html-webpack-plugin');
//ここまで追加

module.exports = {
    entry: './src/index.js',
    output: {
        path: `${__dirname}/dist`,
        filename: 'bundle.js'
    },
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.(css|sass|scss)/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    {
                        loader: 'css-loader'
                    },
                    {
                        loader: 'sass-loader'
                    }
                ]
            },
            {
                test: /\.(png|jpg|gif|svg)/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: 'images/[name].[ext]'
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin(),
        //ここから追加
        new HtmlWebpackPlugin({
            //テンプレートに使用するhtmlファイルを指定
            template: './src/index.html'
        })
        //ここまで追加
    ]
}

・html-webpack-pluginのオプション公式ドキュメント
https://github.com/jantimon/html-webpack-plugin#options

 

 

src/配下にindex.htmlを新規作成

続いて、src/配下へ、元になるHTMLファイルを新規作成します。

<!--index.html-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>webpackチュートリアル<span>(SCSSを追加)</span></h1>
</body>
</html>
  • 今回作成したsrc/配下のHTMLファイルには、CSS・JSは、エントリーポイントのJSで指定するので、読込記述は不要。
  • 読込記述が追加された上で、dist/内に、ファイル生成される(後で確認しよう)

 

 

webpackを起動

準備ができたので、下記コマンドでwebpackを起動します。

npm run build

 

 

HTMLファイル生成後、上書きされている

dist/配下に生成されたHTMLファイルを確認すると、buildの前後で書き変わっているのが確認できます。

 

※ここまでの経緯を知りたい方は、下記webpackカテゴリーの記事を参考に。

https://corecolors.net/category/webpack/

 

build後のdist/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<script defer src="bundle.js"></script><link href="main.css" rel="stylesheet"></head>
<body>
    <h1>webpackチュートリアル<span>(SCSSを追加)</span></h1>
    <img src="/src/images/mountain.jpg" alt="">
    <img src="/src/images/sea.jpg" alt="">
</body>
</html>

 

 

build前のdist/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./main.css">
</head>
<body>
    <h1>webpackチュートリアル<span>(SCSSを追加)</span></h1>
    <img src="/src/images/mountain.jpg" alt="">
    <img src="/src/images/sea.jpg" alt="">

    <script src="./bundle.js"></script>
</body>
</html>

 

具体的な前後の変更点は?

bundle.jsがheadタグ内で読み込まれています。(逆にそれ以外は何も変わっていない)

 

html-webpack-pluginの仕組み

webpack-config.jsに従い、HTMLが生成されるます。
(HTMLに、画像やCSS・JSが自動的に読み込まれて出力される)

 

 

ブラウザで表示・ソースコードを確認する

ブラウザで確認しましょう。生成された、dist/index.htmlをブラウザに表示させると・・・

ソースコードはbundle.jsの読込位置が変わっていますが、それ以外見た目も変わっていません。

変わったのは、これまでdist/index.htmlを編集していたのを、src/index.htmlを編集するようになったことです。

つまり、これで本来の開発の進め方になりました。

 

 

まとめ

本記事では、「HTMLファイルを自動生成する[html-webpack-plugin]の使い方」について、以下のことを解説しました。

  • 本来のdist・srcの役割
  • html-webpack-pluginを使う
  • webpack-config.jsの設定を追加する
  • src/配下にindex.htmlを新規作成
  • webpackを起動
  • html-webpack-pluginの仕組み
  • ブラウザで表示・ソースコードを確認する

これでdist/配下は編集せず、src/配下を編集すれば、HTMLファイルが自動生成されるようになります。ぜひ、html-webpack-pluginを使ってみてください。

 

※webpackの基礎については、下記カテゴリー記事をご参考ください。

https://corecolors.net/category/webpack/

ABOUT ME
ゆう
エンジニア歴6年。 大学卒業後、フィールドエンジニア職に就くがその後のキャリアに不安を感じ、ゼロスキルからWEBデザイナーに転職。 その後WEB制作会社、東証一部上場企業のECサイト運用担当を経て、現在は自社開発企業のWEBコーダーとして仕事に従事。分かりやすく伝えることに課題意識を持ってます。