Hugo で webpack を利用する

はじめに

Hugo と bulma でサイトを作成するにあたり bulma に javascript が含まれていないこともあって vanilla js を書くことが増えました。
少量であればと思っていましたが、時間が取れたので typescript で書く方法をまとめたいと思います。
今回は webpack の導入です。

Github はこちら
github.com

Hugo で webpack を利用する

Hugo は初期状態では webpack を利用する環境がありません。
今回は Hugo のサイトおよびテーマを新設する前提で流れをまとめていきます。

Hugo で site を作成する

今回は後々 firebase を利用していこうと思いますので hugo-firebase という名前のサイトを作ります。

$ hugo new site hugo-firebase && cd hugo-firebase

また、テーマも自作します。
名前は example とします。

$ hugo new theme example

webpack のインストール

次に webpack の環境を作っていきます。

$ npm init -y
$ npm i -D webpack webpack-cli

Hugo のディレクトリ構成に沿って webpack.config.js を以下のように設定します。
この時点で themes/example/static/js/index.js に import したモジュール類を themes/example/static/js/dist 配下に main.js として吐き出すことができます。

module.exports = {
  mode: "development",
  entry: `${__dirname}/themes/example/static/js/index.js`,
  output: {
    path: `${__dirname}/themes/example/static/js/dist`,
    filename: "main.js"
  },
  devServer: {
    contentBase: `${__dirname}/themes/example/static/js/dist`,
    open: true
  }
};

試しに themes/example/static/js/index.js を以下のように書きます。

import { hello } from "./hello";

hello();

また themes/example/static/js/hello.js を以下のように書きます。

export function hello() {
  console.log('Hello');
}

これを Hugo の template として themes/example/layouts/partials/head.html から以下のように dist/main.js として読み込みます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="{{ .Site.Title | safeHTML }}">

  <!-- js -->
  <script src="{{ .Site.BaseURL }}js/dist/main.js"></script>
</head>

〜省略〜

Hugo で webpack を利用する

では実行してみます。
以下の コマンドを実行して localhost:1313 を開いてみてください。

$ npx webpack
$ hugo server -t example -w

コンソールに Hello と出力されていることが確認できると思います。

まとめ

Hugo で webpack を利用する方法をまとめました。
Angular は webpack をよしなにしてくれているので触ったことがありませんでしたが、単独で利用すると理解が進みます。

また時間が取れれば欲を出して rxjs を導入してみたいと思います。

Github はこちら
github.com

参考サイト様

webpack の導入
最新版で学ぶwebpack 4入門 - JavaScriptのモジュールバンドラ - ICS MEDIA

webpack と typescript の導入
最新版TypeScript+webpack 4の環境構築まとめ(React, Vue.js, Three.jsのサンプル付き) - ICS MEDIA

Hugo と webpack 同時に watch しながら serve する
victor-hugo/package.json at master · netlify-templates/victor-hugo · GitHub