1. pug-html-loader
Pug to html loader for webpack
pug-html-loader
Package: pug-html-loader
Created by: willyelm
Last modified: Sat, 25 Jun 2022 00:03:29 GMT
Version: 1.1.5
License: MIT
Downloads: 43,309
Repository: https://github.com/willyelm/pug-html-loader

Install

npm install pug-html-loader
yarn add pug-html-loader

Pug HTML loader for webpack

Installation

npm install pug-html-loader

Usage

In your sources:

 var html = require('./file.pug')
// => returns file.pug content as html compiled string

In your webpack.config.js file:

 module.exports = {
  // your config settings ...
  rules: [
    // your modules...
    loaders: [{
      include: /\.pug/,
      loader: ['raw-loader', 'pug-html-loader'],
      options: {
        // options to pass to the compiler same as: https://pugjs.org/api/reference.html
        data: {} // set of data to pass to the pug render.
      }
    }]
  ]
};

Using it with html-loader

pug-html-loader encode to content to a string variable to avoid it and pass the string content to the loader chain please use the following configuration:

 module.exports = {
  // your config settings ...
  module: [
    // your modules...
    rules: [{
      test: /\.pug/,
      loaders: ['html-loader', 'pug-html-loader'],
      options: {
        // options to pass to the compiler same as: https://pugjs.org/api/reference.html
        data: {} // set of data to pass to the pug render.
      }
    }]
  ]
};

Don't forget to polyfill require if you want to use it in node.
See webpack documentation.

License

MIT (http://www.opensource.org/licenses/mit-license.php)

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin