Recently I switched from Gulp to WebPack, and I realized that I can’t just set up a conversion from jade to html, as I understand it, the webpack doesn’t work at all like Gulp. In Gulp, I just wrote my task for converting jade to html and I got html pages on output. Please explain how to do something like this in a webpack, and if they don’t do that, then how do they work with jade in a webpack?

PS A good example would not prevent

  • I know the answer but I will not give it, because It is 90% correct. The remaining 10% can be expressed in words - "the world has gone mad." Why? Because in the pursuit of glory, newcomers rush to everything that looks like a bone. The same with jade. The creators of plug-ins for the webpack themselves probably never worked with this preprocessor and decided to "Che there, we'll do it" and compiled only into a string in order to use it in a browser. They, "Utkin's children," even came up with the name "isomorphic pug" :) In general, the answer is - do not put pug put the old jade-htm-loader, it somehow compiles in html. With one BUT ... - user220409
  • ... BUT! it does not update itself after compilation, you feel like a schmuck after a dozen restarts. I hope someone will find the answer and it turns out that I just did not quite think of a solution. - user220409

2 answers 2

The following example works for me:

npm i pug-loader -D

webpack.config.js

 loaders: [ // pug { test: /\.pug$/, loader: "pug-loader" } ]

We connect a template

 var template = require('./views/layout.pug');

If you specify a loader in a call (For example: require ("pug! ./ file.pug")) problems may arise when using mixins in pug.

    The peculiarity of webpack is that its output will always be js-package. Thus, you can turn jade into html only if it is used in any js-file.

    To download jade / pug to webpack - you need to use pug-loader :

     var template = require("pug!./file.pug");

    Do not forget to install the pug-loader package in npm.

    To get the template in a separate file - you can try using the file loader:

     var link = require("file!pug!./file.pug");

    If the line above does not work, you can try adding extract:

     var link = require("file!extract!pug!./file.pug");
    • jade-html-loader compiles to files, it’s like a standard. The fact that others cannot, this problem is caused by mythical creatures from Harry Potter who penetrate the brain through the ears. - user220409