How can pug files be converted to html templates without importing them explicitly to the entry point?
The project contains templates, styles, scripts for each application, which lie 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, their explicit import may be inconvenient.
The webpack documentation is written quite a bit about working with preprocessors of templates and their work requires explicit importing. I also need the collector to recursively go through all the directories and leave the converted file in place of the source code.
I tried to solve the problem myself:
- Used pug-loader
On the advice of Moderately Uprooting the Duck from my question on Assembling individual css and scripts into common files, I decided to try glob to bypass directories and include templates as entry points (yes, it probably looks weird). 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 trying to build a webpack, it starts to build a project endlessly.
How to work with templates in the project? Can my method work? Where am I making mistakes?
