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