ADD: Handle subfolders with Webpack

Author: SoldierCorp

build/utils.js

@@ -1,17 +1,21 @@
-exports.pages = function(env) {
+exports.pages = function (env, folder = '') {
+  const rootPagesFolderName = 'pages'
   const HtmlWebpackPlugin = require('html-webpack-plugin')
   const fs = require('fs')
   const path = require('path')
-  const viewsFolder = path.resolve(__dirname, '../src/views/pages')
+  const viewsFolder = path.resolve(__dirname, `../src/views/${rootPagesFolderName}/${folder}`)
 
   var pages = []
 
   fs.readdirSync(viewsFolder).forEach(view => {
-    const viewName = view.split('.')[0];
+    if (view.split('.')[1] === undefined)
+      return false;
 
+    const viewName = view.split('.')[0];
+    const fileName = folder === '' ? `${viewName}/index.html` : `${folder}/${viewName}/index.html`;
     const options = {
-      filename: `${viewName}/index.html`,
-      template: `views/pages/${view}`,
+      filename: fileName,
+      template: `views/${rootPagesFolderName}/${folder}/${view}`,
       inject: true
     };
 

build/webpack.config.js

@@ -139,6 +139,7 @@ module.exports = env => {
       }),
 
       ...utils.pages(env),
+      ...utils.pages(env, 'blog'),
 
       new webpack.ProvidePlugin({
         $: 'jquery',

src/views/pages/blog/example-post.pug

@@ -0,0 +1,22 @@
+extends ../../layouts/master.pug
+
+block title
+  title My Page - Blog post
+
+block basicSeo
+  meta(name='description' content='Blog postpage')
+  meta(name='keywords', content='blog, page, post')
+  meta(name='author' content='')
+
+block manifestBrowserconfigFiles
+  link(href='../manifest.json', rel='manifest')
+  meta(name='msapplication-config' content='../browserconfig.xml')
+
+block scripts
+  script(src='../config/games.json')
+
+block content
+
+  //- Desktop page
+  section.page.blogpost__page
+    h1.page__title # Blog post page