webpackpug-loader

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


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

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.


Solution

  • 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$/));