1

Both pug-loader and pug-html-loader seem to be focused on pre-compiling Pug templates to HTML. I don't want to do that as I need some of the dynamic rendering capabilities that you only get when rendering templates, like being able to pass in a page's title, as a simple example.

What I would like to do, however, is use Webpack to process the Pug templates so as to go through them, figure out what images they use, and load those images over to the /dist folder. I would like to also be able to use url-loader to inline data URLs into the Pug templates where possible, which means they will need to be copied over and modified in the process.

Graham
  • 7,431
  • 18
  • 59
  • 84

2 Answers2

0

Try this :

{
      test: /.pug$/,
      use : [
        {
          loader : ['html-loader', 'pug-html-loader'],
          options : {
            attrs : ['img:src']
          }
        }
      ]
    }
nebulr
  • 641
  • 6
  • 7
0

I see how old this question is, but I struggled so much to attempt to fix this issue and I finally found a solution using html-webpack-pug-plugin which extends html-webpack-plugin

const HtmlWebpackPlugin = require('html-webpack-plugin')
const HtmlWebpackPugPlugin = require('html-webpack-pug-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  entry: {
    home: "./src/index.js",
  },
  output: {
     path: path.resolve(__dirname, "./public"),
     filename: "[name].js",
     publicPath: "/public",
     clean: true,
  },
  module: {
    rules: [
       {
        test: /\.(css|sass|scss)$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin(),
    new HtmlWebpackPlugin({
      template: "./views/_head.pug",
      filename: "../views/head.pug",
      minify: false,
      inject: "head",
    }),
    new HtmlWebpackPugPlugin(),
  ],
};

You should only call HtmlWebpackPugPlugin once as said in the documentation https://github.com/negibouze/html-webpack-pug-plugin#usage

For code to be injected, the template _head.pug needs to have a body tag so that code gets injected For the code to be indented properly, it also needs to have a html tag

_head.pug

doctype html
html
  head

  body

After building: head.pug

doctype html
html
  head
    script(defer src="/public/home.js")
    link(href="/public/home.css" rel="stylesheet")

  body
Tyler2P
  • 2,324
  • 26
  • 22
  • 31