Can't compile every .pug file in a folder using webpack

Question

I'm trying to create a environment using Webpack with a techstack based on:

• pug, for template HTML
• sass, for CSS
• ES7

But I'm having issues creating pug HTML files.

Here's a gist with my webpack.config.js file https://gist.github.com/anonymous/84c02222a44ce219c35ff1a8beeff720

What exactly I'm trying to achieve:

I have a folder structure based on

• app

  ./pug

  ./components, ./views

And what I want to do is compile every pug file on views' folder and turn it into a HTML and send it to dist folder.

You guys can help me, please?

Thanks.

Answer 1

I finally solved my problem. I don't remember exactly where I found this solution, but it worked haha

Here's how we can compile every .pug inside a folder:

First, add this to your module object, in webpack file: { test: /\.pug$/, loaders: [ 'file-loader?name=[path][name].html', 'pug-html-loader?pretty&exports=false' ] },

And then add this function to webpack's entry file function requireAll(r) { r.keys().filter(r => r.forEach(r)) } requireAll(require.context('./', true, /\.pug$/));