Working with pug (jade) templates in a project using webpack

How can I convert pug files to html templates without explicitly importing them to the entry point?

The project contains templates, styles, and scripts for each application, which are located in a separate directory. Frontend folder:

├── frontend
│   ├── common
│   ├── node_modules
│   ├── app1
│   ├── app2
│   ├── app3
│   ├── ...
│   └── webpack.config.js

Each application folder contains a different number of templates:

├── app
│   ├── static
│   │   └── app
│   │       ├── css
│   │       └── js
│   └── templates
│       └── app
│           ├── app__tmp2.pug
│           ├── app.pug
│           ├── app__tmp1.pug
│           └── app__settings.pug

Accordingly, explicitly importing them can be inconvenient.

In the documentation of the webpack, quite a bit is written about working with template preprocessors and for them to work, you need to explicitly import them. I also need the collector to go through all the directories recursively and leave the converted file in the source location.

I tried to solve the problem myself:

  1. Used pug-loader
  2. On the advice of A Moderately Hard-boiled Duck from my question on Building individual css and scripts into shared files decided to try glob to crawl directories and include templates as entry points (yes, it probably looks strange). Part of my webpack config with loaders and entry points:

    entry: {
      index: "./index.js",
      pug: glob.sync([path.join(__dirname + '/*.pug')])
    }
    ,
    output: {
      path: __dirname,
      filename: "[name].js"
    },
    module: {
     loaders: [{
      test: /\.pug/,
      loader: 'pug'
    }
    

But when you try to build the webpack starts to build the project endlessly.

How to work correctly with templates in a project? Can my method work? Where am I making mistakes?

Author: Дух сообщества, 2016-12-25