共通パーツを各ファイルに記述

まず、includeを利用する前にファイル毎に書く
（今回は「headerナビ」を追加）

現在の階層構造

webpack-tutorial
├dist/
|   ├──css/
|   |   └──style.css
|   ├──js/
|   |   └──bundle.js
|   └──index.html
|
├node_modules/
├src/
|   ├──images/
|   ├──js/
|   |   ├──index.js
|   |   └──sub.js
|   ├──scss/
|   |   └──style.scss
|   └──templates/
|   |   ├──index.pug //headerナビを追加する
|       ├──index.html
|   |   └──menu.pug //headerナビを追加する
|
├package-lock.json
├package.json
└webpack.config.js

index.pug

doctype html
html(lang="en")
    head
        meta(charset="UTF-8")
        meta(http-equiv="X-UA-Compatible", content="IE=edge")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        title Document
    body
        header
            ul 
                li 
                    a(href="./index.html") TOP
                li 
                    a(href="./menu.html") MENU
        h1 webpackチュートリアル
            span (SCSSを追加)
        img(src="/src/images/mountain.jpg", alt="")
        img(src="/src/images/sea.jpg", alt="")

menu.pug

doctype html
html(lang="en")
    head
        meta(charset="UTF-8")
        meta(http-equiv="X-UA-Compatible", content="IE=edge")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        title メニュー | webpackチュートリアル
    body
        header
            ul 
                li 
                    a(href="./index.html") TOP
                li 
                    a(href="./menu.html") MENU
        h1 メニュー
            span (SCSSを追加)
        img(src="/src/images/mountain.jpg", alt="")
        img(src="/src/images/sea.jpg", alt="")

これらをwebpackを起動し、ファイル出力すると、各々以下のような表示になる。

ただし、片方だけheaderナビの内容を変えると、両者に差分が出てしまう。

この場合に、includeは有効。
共通パーツとして使用すれば、修正はincludeさせるファイルのみで変更可能になる。
（WordPressに詳しい方は、headerやfooterと同じようなものと捉えてOK）

includeファイルを作成する

webpack-tutorial
├dist/
|   ├──css/
|   |   └──style.css
|   ├──js/
|   |   └──bundle.js
|   └──index.html
|
├node_modules/
├src/
|   ├──images/
|   ├──js/
|   |   ├──index.js
|   |   └──sub.js
|   ├──scss/
|   |   └──style.scss
|   └──templates/
|   |   ├──_headerNav.pug //追加
|   |   ├──index.pug
|       ├──index.html
|   |   └──menu.pug
|
├package-lock.json
├package.json
└webpack.config.js

※includeさせている特別なファイルだと分かるように、_から始まるファイル名する

_headerNav.pug

header
    ul 
        li 
            a(href="./index.html") TOP
        li 
            a(href="./menu.html") MENU

incudeファイルを読み込む記述を追加する

index.pug

doctype html
html(lang="en")
    head
        meta(charset="UTF-8")
        meta(http-equiv="X-UA-Compatible", content="IE=edge")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        title Document
    body 
        //- ここから変更
        include _headerNav.pug
        //- ここまで変更
        h1 webpackチュートリアル
            span (SCSSを追加)
        img(src="/src/images/mountain.jpg", alt="")
        img(src="/src/images/sea.jpg", alt="")

menu.pug

doctype html
html(lang="en")
    head
        meta(charset="UTF-8")
        meta(http-equiv="X-UA-Compatible", content="IE=edge")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        title メニュー | webpackチュートリアル
    body 
        //- ここから変更
        include _headerNav.pug
        //- ここまで変更
        h1 メニュー
            span (SCSSを追加)
        img(src="/src/images/mountain.jpg", alt="")
        img(src="/src/images/sea.jpg", alt="")

webpackを起動

npm run build

ブラウザで確認する

試しにincludeファイルを変更してみる

_headerNav.pug

header
    ul 
        li 
            a(href="./index.html") 変更されたトップページ
        li 
            a(href="./menu.html") 変更されたメニューページ

webpackを起動後、ブラウザで再度確認

変更したのはincludeファイルである_headerNav.pugだけにも関わらず、2ファイルとも変更されているのが確認できる。