webpackでPugを使用する

webpackの環境でPugを使用する方法を試してみます。

設定方法

webpackの環境に使用するパッケージを追加します。

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

webpack.config.jsに下記処理を追加します。

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  module: {
    rules: [
      {
        // 処理対象のファイルの指定
        test: /\.pug$/,
        // 変換で使用するローダーを指定
        use: {
          loader: 'pug-loader',
          options: {
            pretty: true,
            root: path.resolve(__dirname, "src", "pug")
          }
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "src", "pug", "index.pug"),
      filename: 'index.html',
      minify: false
    })
  ]
};

これで設定ができたので実際に試してみます。
src/pug/ に下記内容でindex.pugを追加します。

doctype html
html(lang="ja")
  head
    meta(charset="UTF-8")
    title トップページ
  body
    p トップページです

ビルドを行うと、distディレクトリ内にindex.htmlが生成されました。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>トップページ</title>
  <script defer src="main.js"></script></head>
  <body>
    <p>トップページです</p>
  </body>
</html>

次に別途ページの作成を試してみます。
src/pug/にaboutディレクトリを作成して、下記内容のindex.pugを作成します。

doctype html
html(lang="ja")
  head
    meta(charset="UTF-8")
    title about
  body
    p aboutです

webpack.config.jsのpluginsにaboutの設定を追加します。

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  module: {
    rules: [
      {
        // 処理対象のファイルの指定
        test: /\.pug$/,
        // 変換で使用するローダーを指定
        use: {
          loader: 'pug-loader',
          options: {
            pretty: true,
            root: path.resolve(__dirname, "src", "pug")
          }
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "src", "pug", "index.pug"),
      filename: 'index.html',
      minify: false
    }),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "src", "pug", "about", "index.pug"),
      filename: 'about/index.html',
      minify: false
    })
  ]
};

これでビルドを行うと、about/index.htmlが生成されました。
LPや数ページ程度のサイトであればこれでも問題ないのですが、生成するHTMLを増やす毎にwebpack.config.jsに設定を追加していく必要があります。

各pugファイルのパスから自動で設定できるようにしてみます。
globuleを追加でインストールします。

npm install globule --save-dev

webpack.config.jsに追加した処理を変更します。

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const globule = require('globule');

const webpackConfig = {
  module: {
    rules: [
      {
        // 処理対象のファイルの指定
        test: /\.pug$/,
        // 変換で使用するローダーを指定
        use: {
          loader: 'pug-loader',
          options: {
            pretty: true,
            root: path.resolve(__dirname, "src", "pug")
          }
        }
      }
    ]
  },
  plugins: []
};

// pugファイルの複数ページ対応
const pugPaths = globule.find({
  src: ['src/pug/**/*.pug', '!src/pug/**/_*.pug']
});
pugPaths.forEach(function(pugPath) {
  const filename = pugPath.replace('src/pug/', '').replace('.pug', '.html');
  webpackConfig.plugins.push(
    new HtmlWebpackPlugin({
      template: pugPath,
      filename,
      minify: false
    })
  )
});

module.exports = webpackConfig;

大まかの変更点としては、webpackの設定をいったん変数に格納した上で、生成するHTML分だけpluginsに設定を追加していくようにしています。
また、頭文字が「_」のpugファイルは生成対象に含まないようにしています。

これでビルドを行うと、HTMLファイルが生成されることを確認できました。

参考サイト

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2022年10月
 1
2345678
9101112131415
16171819202122
23242526272829
3031