How to configure the plugin for both Vue and non-Vue usage?

[TokugawaTakeshi]

For the case when we need the Vue template and for the case when we just need to import pre-processed by Pug HTML code to JS/TS file, different pre-processing is required. I don't know the details about this pre-processings, but before use pug-loader, the working setup was:

{
  // ...
  module: {
    rules: [
      {
        test: /\.pug$/u,
        oneOf: [

          // For the Vue Singe File Component
          {
            resourceQuery: /^\?vue/u,
            use: [ "pug-plain-loader" ]
          },

          // For other cases
          {
            use: [
              {
                loader: "html-loader",
                options: {
                  /* [ Theory ] Without this option, all capital cases tags (invalid HTML5 vue normal for the Vue
                   * templates loaded externally) will be converted to lower cased.
                   * [ Reference ] https://stackoverflow.com/q/63164597/4818123 */
                  minimize: {
                    caseSensitive: true
                  }
                }
              },
              "pug-html-loader"
            ]
          }
        ]
      }
    ]
  }
}

What it the equivalent configuration for pug-plugin and which loaders will become redundant after migration?

[webdiscus]

Setup for Vue

Change your vue.config.js according to the following minimal configuration:

const { defineConfig } = require('@vue/cli-service');

module.exports = defineConfig({
  transpileDependencies: true,

  chainWebpack: (config) => {
    const pugRule = config.module.rule('pug');

    // IMPORTANT: clear all existing pug loader settings
    // defaults pug loader in Vue is `pug-plain-loader`
    pugRule.uses.clear();
    pugRule.oneOfs.clear();
  },

  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.pug$/,
          oneOf: [
            // allow <template lang="pug"> in Vue components
            {
              resourceQuery: /^\?vue/u,
              loader: '@webdiscus/pug-loader',
              options: {
                method: 'html', // render Pug into pure HTML string
              },
            },
            // allow import of Pug in JS/TS and for "other cases", if a file hasn't the extension `.vue`
            {
              loader: '@webdiscus/pug-loader',
              options: {
                method: 'compile', // compile Pug into template function
              },
            },
          ],
        },
      ],
    },
  },
});

Note: for "other cases", if your Pug templates hasn't external variables, then use the render method. This method is fastest and compile smaller file size.

Usage Pug in Vue

An indent for Pug code in Vue template is allowed:

<template lang='pug'>
  h1 Hello Pug!
</template>

Usage Pug in JS/TS with compile method

demo.pug with external variable colors passed from JS/TS

each color in colors
  span(style=`color: ${color}`) #{color} 

main.ts

// import Pug as template function when used the `compile` method
import tmpl from './views/demo.pug';

// define custom data used in Pug template
const locals = { colors: ['red', 'green', 'blue', 'orange'] };
// pass custom data in Pug template
const html = tmpl(locals); // generated pure HTML string
...

Usage Pug in JS/TS with render method

demo2.pug without external variables

- const colors = ['red', 'green', 'blue', 'orange'];
each color in colors
  span(style=`color: ${color}`) #{color} 

main.ts

// import Pug as pure HTML string when used the `render` method
import html from './views/demo2.pug';
...

Usage both compile and render methods in JS/TS

Sometimes we have Pug templates contained external variables and other templates without external variables.
We can use these templates with both methods together.

Independently of the configured method in settings of the pug-loader we can use the ?pug-render query for the render method and ?pug-compile for the compile method.

Usage of templates demo.pug and demo2.pug (see above) together:

// import Pug as pure HTML string when used the `?pug-render` query
import htmlDemo2 from './views/demo2.pug?pug-render';

// import Pug as template function when used the `?pug-compile` query
import tmpl from './views/demo.pug?pug-compile';
const htmlDemo = tmpl({ colors: ['red', 'green', 'blue', 'orange'] });

// The result of `htmlDemo` is equal to `htmlDemo2`
...

Usage the html-loader with pug-loader

If, for whatever reason, you need the features of html-loader, then change the settings block "for other":

{
  use: [
    {
      loader: 'html-loader',
      options: {
        minimize: {
          caseSensitive: true
        }
      }
    },
    {
      loader: '@webdiscus/pug-loader',
      options: {
        method: 'html',
      }
    }
  ],
}

Note: for usage with Vue the additional html-loader is not needed, only for "other cases"
It is not recommended! Use it if you really know what the html-loader is needed for.

[TokugawaTakeshi]

@webdiscus O'K. Please give me some time. I'll contact again once repro will ready.

[TokugawaTakeshi]

@webdiscus

Very sorry for keep you waiting.
The repository is ready.
https://github.com/TokugawaTakeshi/Issues-WebpackPugPlugin

I could not reproduce the same issue as mentioned above, but these is another one - once it will be solved, everything will work, I suppose. I described the reproduction flow in README.md of this repository.

[webdiscus]

@TokugawaTakeshi

thank you for the repo.

The @webdiscus/pug-loader is designed as very customisable loader for many use cases.

Universale solution

The problem was at 2 places:

1. Project.d.ts:

   declare module "*.pug" {
     const template: Function; // <-- HERE was false `string` type, the 'compile' method generates the template Function
     export default template;
   }

2. ./Source/Components/ExampleMultipleFilesComponent.vue.ts

   @VueComponentConfiguration({
     template: componentTemplate() // the template function must be called to render into HTML string
   })

---

Alternative solution

If your Pug templates, imported in TS, has't custom data,
then ignore both above and change in the webpack.config.ts in the section allow import of Pug in JS/TS
the option method from compile to render.

{
  test: /\.pug$/,
  oneOf: [
    // allow <template lang="pug"> in Vue components
    {
      resourceQuery: /^\?vue/u,
      loader: '@webdiscus/pug-loader',
      options: {
        method: 'html', // render Pug into pure HTML string
      },
    },
    // allow import of Pug in JS/TS and for "other cases", if a file hasn't the extension `.vue`
    {
      loader: '@webdiscus/pug-loader',
      options: {
        method: 'render', // <-- HERE, compile Pug into template string
      },
    },
  ],
}

NOTE: using this config, ignore points 1. and 2. above.

---

You can choose a variant of solution that is passed in your case.
I think, the Alternative solution with the render method is easily, because it's only 1 change in one file.

---

Using Vue/React/Angular, you don't should use the pug-plugin, it is designed for pure usage webpack + Pug + SCSS.
The @webdiscus/pug-loader is part of pug-plugin and is absolutely enough for usage Pug with Vue.

---

Please see my comments in PR

For more information please see in the readme of @webdiscus/pug-loader:

• Additional options
• Usage of compile method
• Usage of render method
• Usage of html method

[TokugawaTakeshi]

@webdiscus

Many thanks for the quick respond and support of your plugin.
I pleasantly surprised by your responsibility and good business manners.

I marked your great responses as solution.

[webdiscus]

@TokugawaTakeshi

Thanks for using pug-plugin / pug-loader :-)

[webdiscus]

@TokugawaTakeshi

The pug-plugin is designed for easy life who use Webpack/Pug/SCSS(Less, Stylus, etc.) to use the scripts and styles like in HTML - load where is used, without ugly hacks as definitions of styles and scripts in webpack entry and/or importing of styles in JS (very very bad practice).
Using pug-plugin you can miss using plugins and loaders such as html-webpack-plugin, mini-css-extract-plugin, html-loader, resolve-url-loader, svg-url-loader, posthtml-inline-svg, copy-webpack-plugin, webpack-remove-empty-scripts.

Keep your Webpack config clear and clean.

The pug-plugin enable to use Pug files directly in webpack entry.
In this case, the entry point is a Pug file containing all included dependencies (scripts, styles).
You can see the usage example in the source of Hello World.

For Vue, the pug-plugin is irrelevant. But if you use Webpack, I can help you configure your setup with pug-plugin.