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ファイルが生成されることを確認できました。
コメントが承認されるまで時間がかかります。