Vue CLI 3 using index pug to generate pug template

Question

I am using Vue CLI 3 with built in Webpack and I am trying to use index.pug as source index template instead of default HTML. I want to output a index.pug file as a result of webpack process for further population by Node server with dynamic data.

Here is my vue.config.js:

'use strict'
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')

const resolve = (dir) => {
  return path.join(__dirname, '.', dir)
}

module.exports = {
  outputDir: path.resolve(__dirname, 'server/app'),
  baseUrl: process.env.ENV === 'production' ? process.env.VUE_APP_CDN_URL + 'app/' : '/',
  configureWebpack: {
    context: path.resolve(__dirname, './'),
    entry: {
      app: './client/main.js'
    },
    resolve: {
      extensions: ['.js', '.vue', '.json'],
      alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': resolve('client')
      }
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: './public/index.pug',
        inject: true
      }),
    ]
  },
  chainWebpack: config => {
    config.module
      .rule('pug')
      .test(/\.pug$/)
      .use('pug-loader')
        .loader('pug-loader')
  }
}

Unfortunately, above fails with:

Error: Child compilation failed:
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.

Some thoughts and assumptions:

configureWebpack seems to be setup correctly (https://cli.vuejs.org/guide/webpack.html#chaining-advanced)
HtmlWebpackPlugin might not be the plugin to use since its purpose is to generate HTML file as output, but I cant even get that to complete successfully

Unfortunately, there is not a whole lot of documentation online on this topic, so hoping for help here. Thanks.

score 0 · Answer 1 · answered Jan 17 '19 at 06:30

0

Likely not a direct answer but we had to add the generated scripts to JSPs. An alternate is to use a ManifestPlugin and create a list of generated assets per entry file and append them to the index.pug.

I have an open issue but you can use their generate function to come up with ways to dice the assets the way you prefer.

answered Jan 17 '19 at 06:30

BisonAVC

1,980
2
13
12

This could work, but seems like a hack to resolve something that should be configurable via VueCLI/Webpack. Do you have code sample for how you use ManifestPlugin to extract assets and inject into index.pug? – sbay Jan 20 '19 at 04:23
Yes, it would be nice to support a configurable config. Until then take a look at the generate deep link that shows how you can use the generate function to create your own manifest. – BisonAVC Jan 31 '19 at 07:26

Vue CLI 3 using index pug to generate pug template

1 Answers1