ここ最近はwebpackの記事が重なっていますが、前回のSassに続いて今回はPugをコンパイルする環境をwebpackで作成していきたいと思います。過去記事「GulpでJavascriptのテンプレートエンジンPugの開発環境を構築する」ではGulp環境でのPugをコンパイルする方法についてまとめていました。だいたい同じような形になるのですが、webpackの場合は少し異なる部分もありますのでその点も踏まえてまとめていきたいと思います。   また、PugのコンパイルにはTypeScriptやJavaScriptをバンドルする作業が必要になります。過去記事ではwebpackでTypeScriptのコンパイルやBabelを使ったJavaScriptのトランスパイルに関する記事をまとめており、今回はそれを準備している前提で進めていますので、下記のリンクからご参考ください。 【参考記事】 webpackでTypeScriptの自動コンパイル環境を作成してみる webpackでBabelを使ったJavaScriptトランスパイルの環境構築   それではまず必要なパッケージをインストールしていきます。下記のようにコマンドを実行していきます。まずはPug本体に加えて、pug用のローダーとして「pug-loader」をインストールしてPugのコードを解析できるようにして、「html-webpack-plugin」でhtmlファイルとして出力できるようにします。そして複数のPugファイルからhtmlファイルを個別に出力する必要があるので「globule」というものもインストールしておきます。

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

  インストールが完了するとpackage.jsonにパッケージが追加されているのが確認できます。これで準備は完了ですので、引き続きwebpackの設定を行なっていきます。 【package.json】

{
  .......
  "devDependencies": {
    .......
    "html-webpack-plugin": "^5.3.1",
    "pug": "^3.0.2",
    "pug-loader": "^2.4.0",
    .......
  },
  "dependencies": {
    "globule": "^1.3.2",
    .......
  }
  .......
}

  今回のディレクトリ構造は下記にようなものを想定しています。TypeScriptとPugのソースファイルはsrcディレクトリに配置し、コンパイルされたものはdistディレクトリに格納される形になります。サイトの構造によってはPugのパーシャルファイルも使いますがそれも合わせてsrcディレクトリに格納しています。また、ページごとのメタ情報などをPugファイルのコンパイル時に外部ファイルから読み込めるように、データを持たせたJavaScriptファイルも使用しています。

node_modules
dist
┣（main.js）
┗（index.html）
src
┣ main.ts
┣ index.pug
┣ _header.pug
┣ _footer.pug
┗ data
    ┗ global.js
webpack.config.js
tsconfig.json

  それではwebpackの設定を行なっていきます。まずは必要なパッケージをそれぞれ読み込んでおきます。そして、Pugをコンパイルする場合には各ページごとに個別のHTMLファイルとして出力する必要があるので、全てのPugファイルを「globule」を使って読み込んでおくことが必要になります。第一引数にPugの拡張子を持つ全てのファイルを対象に指定し、この時に、「ignore」のオプションでは読み込む対象外のファイルも指定できます。ここではパーシャルファイルを読み込まないようにしておく設定になります。そのあとは同じようにwebpackのローダーの設定を行います。PugファイルにはPugのローダーが読み込まれるようにしておきます。 【webpack.config.js】

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

const pugFiles = globule.find('src/**/*.pug', {
  ignore: [ 'src/**/_*.pug' ]
});

const buildDefault = {
  mode: 'development',
  devtool: 'source-map',
  entry: './src/main.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader'
      },
      {
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [ '@babel/preset-env' ]
            }
          }
        ]
      },
      {
        test: /\.pug$/,
        use: [
          {
            loader: 'pug-loader',
            options: {
              pretty: true,
              root: path.resolve(__dirname, 'src')
            }
          }
        ]
      }
    ]
  },
  resolve: {
    extensions: [ '.ts', '.js', '.json' ]
  },
  plugins: []
}

pugFiles.forEach((pug) => {
  const html = pug.split('/').slice(-1)[0].replace('.pug', '.html');
  buildDefault.plugins.push(
    new HtmlWebpackPlugin({
      inject: false,
      filename: `${path.resolve(__dirname, 'dist')}/${html}`,
      template: pug,
      data: require(`${path.resolve(__dirname, 'src')}/data/global.js`)
    })
  )
});

module.exports = buildDefault;

  そのあとですが、先ほど読み込んだ複数のPugファイルを個別に「html-webpack-plugin」を使ってHTMLファイルとして出力するための処理を書いていきます。Pugファイルと同じファイル名で拡張子を.htmlになるように書き換えて、それを先ほどのwebpackのplugin設定に追加していきます。ここでは動的にpluginの設定が変わるのでこのような処理が必要となります。   そして、プラグインのオプションではファイルの出力先ディレクトリや、コンパイル時に読み込むデータを指定することができます。また、html-webpack-pluginを使ってHTMLファイルを出力すると、エントリーポイントのJavaScriptファイルが読み込まれるようタグが自動的に書き出したHTMLに挿入されるのですが、それが不要な場合には「inject」の指定をfalseにしておきます。詳しくはnpmのドキュメントをご参考ください。 【html-webpack-plugin - npm】 https://www.npmjs.com/package/html-webpack-plugin   ちなみにここではPugのコンパイル時にページごとのメタ情報を外部のJavaScriptに入れておき、読み込む形にしています。サンプルとしては下記のような構造にしてみました。 【src/data/global.js】

module.exports = {
  global: {
    siteName: 'サンプルサイト',
    siteUrl: 'https://example.com',
    pageMeta: {
      home: {
        id: 1,
        name: 'home',
        title: 'トップページ',
        description: 'サイトのトップページです',
        ogpImage: 'assets/img/icon/ogp_default.jpg',
        type: 'website',
        path: '/'
      },
      page1: {
        id: 2,
        name: 'page1',
        title: 'ページ1',
        description: 'ページ1のディスクリプションです',
        ogpImage: 'assets/img/icon/ogp_default.jpg',
        type: 'article',
        path: '/page1.html'
      },
      ........
    }
  }
}

  ここではJavaScriptのオブジェクトとしてデータを格納していますが、JSONの形でもできるかと思いますので必要に合わせてデータ構造は検討してみてもいいですね。あとはこれまで同様、エントリーポイントになるスクリプトファイルをコンパイルすると、このようにHTMLファイルが書き出されているのが確認できます。きちんと外部ファイルで読み込んだメタデータも反映されていますね。  

---

  今回はwebpackでPugファイルをコンパイルしてHTMLファイルを生成する方法についてまとめてみました。SassからCSSのコンパイル時と異なり、Pugの場合には複数のHTMLに書き出す時にはプラグインの設定をページごとに繰り返す必要がある点には注意が必要ですね。Pugについては今回省略していますが、詳しくは過去記事「Pugでテンプレートとデータでファイルを切り分けた開発を行う」にまとめていますのでこちらも合わせてご参考ください。   【参考にさせて頂いたサイト】 【脱gulp】webpackでpugを使う。jsonで一括ビルドも。