VueJS+WebpackアプリをフルPug化する

Pug VueJS

VueJS+Webpack のアプリで HTML をやめ、すべて Pug で記述できるようにする方法をまとめました。

はじめに

Pug は HTML を簡略記法で記述できるようにするツールです。

例えば、HTML で、

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>Pug</title>
  </head>
  <body>
    <h1>Pug - Node template engine</h1>
    <div id="container" class="col">
      <p>You are so cute</p>
    </div>
  </body>
</html>

が、Pug だと、

doctype html
html(lang='ja')
  head
    title Pug
  body
    h1 Pug - Node template engine
    #container.col
      p You are so cute

となります。シンプルですね。

前提

vuejs-templates/webpack のテンプレートの構成を前提とします。

インストール

インストールは、npm を使うだけです：

$ npm i -D pug pug-loader

Vue の単一ファイルコンポーネントの変換

*.vue ファイルのテンプレートは lang="pug" を付けて、HTML を Pug の記述方法に変更するだけです。

<template lang="pug">

index.html の変換

問題は、トップにある index.html ファイルです。

まず、index.html を index.pug にリネームして、中身を Pug で書き換えます。

次に webpack.base.conf.js に設定を追加します：

  module: {
    rules: [
      .....
      {
        test: /\.pug$/,
        loader: 'pug-loader'
      }
.....

そして、webpack.dev.conf.js を以下のように書き換えます：

  plugins: [
    .....
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.pug',  // この行を変更
      inject: true
    }),
.....

同様に webpack.prod.conf.js も変更します。

これでフルPug化できました！

おまけ

HTML から Pug への変換は、ネットのサービスを使うと楽です。