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

公開日：2026-02-14 / 更新日：2026-02-26

フロントエンド

Webpack

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

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

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

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

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"); // Node.jsに標準で用意されている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) => {
        // エントリー名が'main'の場合は'style.css'を返す
        // それ以外はエントリー名そのまま（[name].css）にする
        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: [
          //変換されたCSSをJavaScriptとは別のCSSファイルとして抽出
          MiniCssExtractPlugin.loader,
          //CSSをJavaScriptからimportできる形に変換
          "css-loader",
          //WebpackからPostCSSを呼び出して実行
          "postcss-loader",
          //Webpackからsassを呼び出してSass→CSSを実行
          "sass-loader",
        ],
      },
    ],
  },
};

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