如何使用带有pug和scss加载程序的webpack生成多个输出文件？

Question

这是我项目的当前结构：

app/
-- dist/
-- src/
---- components/
------ headers/
-------- header.pug
-------- header.scss
------ menus/
-------- mega-menu.pug
-------- mega-menu.scss
---- websection-navcustom.pug
-- package.json
-- webpack.config.js

我目前正在尝试加快一些HTML模板的开发，第三方电子商务平台允许我将其插入网站的特定部分（认为它有点像wordpress页面/ post，允许我更改网站的结构。）

该项目的想法是为该平台提供一些预制组件，我们可以轻松地混合和匹配它们，以快速更改新网站的设计，并让webpack将所需的CSS和HTML编译为各种根目录级模板文件。

例如，我们将包括/扩展这两个预制组件

------ headers/
-------- three-column-header.pug
-------- three-column-header.scss
------ menus/
-------- centered-horizontal-menu.pug
-------- centered-horizontal-menu.scss

在src级别的pug文件中：

---- websection-navcustom.pug

这将导致类似于以下内容（我仍在阅读PUG，因此语法可能已关闭）：

extend three-column-header.pug
extend centered-horizontal-menu.pug

style(type="text/css").

    //three-column-header.scss content

    //centered-horizontal-menu.scss content


block social

    //code for social media icons

block logo

    //logo code/url

block contact

    //code for phone, cta button, etc.

block menu-items

    //pug code for bootstrap nav_items

一旦构建，项目应在dist / websection-navcustom.html文件中生成以下代码

<!--
    section: navcustom
-->
<style>

    //three-column-header.scss content

    //centered-horizontal-menu.scss content

</style>
<script>

  //any JS a component requires

</script>
<header class="header">
    <div class="col-md-4">

        //code for social media icons

    </div>
    <div class="col-md-4">

        //logo code/url

    </div>
    <div class="col-md-4">

        //code for phone, cta button, etc.

    </div>
</header>
<nav class="navbar navbar-default">
    <ul class="nav nav-*">

        //menu-items

    </ul>
</nav>

在看教程时，似乎webpack不允许您开箱即用地生成多个模板文件，而且我找不到一种直接将样式添加到HTML模板中的方法。

在我继续研究更多内容之前，我想知道是否有人可以让我知道webpack是否是实现我们正在尝试做的最好的方法，以及是否有建议使用的教程/插件会有所帮助？ / p>

编辑：此外，我们可以使用此电子商务平台创建各种自定义模板文件，其中websection-navcustom.pug被用作简化示例。实际上，除了这个“高级”模板文件以外，还有更多的东西。