Webpackでバンドル後のJavaScriptをHTMLに自動で読み込ませる方法

公開日：2026-02-14 / 更新日：2026-03-16

フロントエンド

Webpack

今回は、Webpackでバンドル後のJavaScriptをHTMLに自動で読み込ませる方法を解説します。

正確には、MiniCssExtractPluginなどでCSSを別ファイルとして抽出している場合、これらもすべて自動でHTMLに注入することが可能です。

なお、本記事は、Webpack解説シリーズの「WebpackでSassをコンパイルする方法」の続きになります。

Sassのコンパイル設定や、CSSを別ファイルとして切り出す手順については本記事では解説していませんので、こちらが知りたい方は、前回の記事をご覧ください。

※本記事は、Webpack 5を使用した環境を前提としています。

HTMLにバンドル後のJavaScriptを自動で読み込む方法

WebpackでJavaScriptファイルをバンドルする手順や、SassをCSSにコンパイルし、CSSだけ別ファイルとして分離する方法については以下の記事で解説しました。

しかし、バンドルされたファイルや分割されたファイルは、手動でHTMLに読み込まないといけません。

特に、ブラウザのキャッシュ対策としてファイル名にハッシュ値を付与している場合、ビルドのたびにファイル名が変わるため、<script>タグや<link>タグを毎回手作業で更新するのは非常に手間がかかります。

※Webpackで使えるハッシュ値の種類は次回の記事で解説予定です。

そこで、Webpackのビルド時に、自動で生成されたJavaScript・CSSファイルをHTMLに注入したい場合は、プラグイン「HtmlWebackPlugin」を使います。

まずは、プラグインをインストールします。

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

プラグインのインストールが完了したら、src/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の使い方</title>
</head>

<body>
  <div class="pageheader">
    <h1>ここにテキストが入ります。</h1>
  </div>
</body>

</html>

最後に、webpack.config.js上でHtmlWebpackPluginをインポートし、プラグインの設定を行います。

HtmlWebpackPluginの設定では、ビルド時に生成されるHTMLの元となるテンプレートファイル（今回の場合はsrc/index.html）を指定し、どのJavaScriptを自動で読み込むか、またそれらをHTMLのどこに挿入するかを設定します。

const path = require("node:path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "production",
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].js",
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: (pathData) => {
        return pathData.chunk.name === "main" ? "style.css" : "[name].css";
      },
    }),
    new HtmlWebpackPlugin({
      // ビルド時に使用するHTMLテンプレートを指定
      template: "./src/index.html",
      // 生成されたスクリプトタグを挿入する位置（bodyの末尾）
      inject: "body",
      // このHTMLに自動で読み込ませるエントリーポイントを指定（複数指定する場合は配列の中でカンマ区切りで指定）
      chunks: ["main"],
    }),
  ],
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          "postcss-loader",
          "sass-loader",
        ],
      },
    ],
  },
};

これでnpx webpackコマンドを実行すると、dist/index.htmlが生成され、chunksで指定したエントリーポイントのJavaScriptファイルと、その中で読み込まれているSassファイルから生成されているCSSファイルが、自動で読み込まれていることが分かります。