Webpacker4 で Vue と Pug を扱う

webpacker v4.0.2 で確認しています。

Webpacker4 + Vue.js の単一ファイルコンポーネント (SFC) で、

<template lang="pug">
  .hoge
</template>

のような Pug テンプレートを扱う方法です。

yarn add pug pug-plain-loader

config/webpack/loaders/pug.js

module.exports = {
  test: /\.pug$/,
  use: [{
    loader: 'pug-plain-loader'
  }]
}

config/webpack/environment.js

const { environment } = require('@rails/webpacker')
const pug = require('./loaders/pug')

environment.loaders.prepend('pug', pug)

参考