title: Can Webpack build multiple HTML files from SCSS and Pug?
body: <p>I've read quite a few tutorials on webpack, but it seems more for creating web apps then for what I'm trying to do so I didn't want to waste any more time if the following isn't possible.</p>
  
  <p>I'm creating websites on a third-party eCommerce system and they have a system of coding out templates that can be used to change the structure of their website. Below is an example of one of their templates I would be creating (although there are many types &amp; variations I will need to make, not just a few). </p>
  
  <p>My idea to streamline the creation of these templates is to create a bunch of pug components and place them in the components/ directory. Outside of the components directory I want to make higher level pug templates that utilize the components. Once  these have been created, I would build it with NPM and the template files need to be converted to HTML and placed within the /dist folder.</p>
  
  <p>Is this hard to do with webpack?</p>
  
  <p>Structure of the project:</p>
  
  <pre><code>src/
  ..components/
  ....header/
  ......header1.pug
  ......header1.scss
  ..navcustom-template.pug
  ..customfooter-template.pug
  ..non-template-specific.scss
  </code></pre>
  
  <p>and once built:</p>
  
  <pre><code>dist/
  ..navcustom-template.html
  ..customfooter-template.html
  ..non-template-specific.css
  
  src/
  ..components/
  ....header/
  ......header1.pug
  ......header1.scss
  ..navcustom-template.pug
  ..customfooter-template.pug
  ..non-template-specific.scss
  </code></pre>
  
  <p>Sample of a template:</p>
  
  <pre><code>&lt;!--
      Section: NavCustom
  --&gt;
  
  &lt;style&gt;
  
      //Template Speific CSS Imports Here
  
  &lt;/style&gt;
  &lt;script type="text/javascript"&gt;
  
      //Template Speific JS Imports Here
  
  &lt;/script&gt;
  &lt;header&gt;
  
      &lt;div class="col-md-4"&gt;
  
          // Social Media Code
  
      &lt;/div&gt;
  
      &lt;div class="col-md-4"&gt;
  
          // Logo Code
  
      &lt;/div&gt;
  
      &lt;div class="col-md-4"&gt;
  
          //  Call to Action Code
  
      &lt;/div&gt;
  
  &lt;/header&gt;
  &lt;nav&gt;
  
  &lt;/nav&gt;
  </code></pre>