webpack4 pug sass ディレクトリごとに複数出力したい

静的ページをタスクランナーをwebpackを用いて開発を行っています。
TOPページのみだとentryからファイルを指定すれば済むのですが、
複数ページになってくるとテンプレートで読み込みたいファイルが異なってくるので、
ディレクトリごとに出力するにはどうしたらいいですか。
entryには追記していく方法・HtmlWebpackPlugin内に追記していく方法は避けたいです。
jsは「async.js」「defer.js」で分ける予定です。（これはentryで分ける）

やりたいことは以下のようなツリーになることです。

tree
1|-public(出力)
2  |-assets
3    |-js
4      |-main.bundle.js
5    |-css
6      |-index.css
7        |-contact
8          |-form.css
9  |-template
10    |-index.html
11    |-contact
12      |-form.html
13      |-conf.html
14      |-conm.html
15
16|-source(開発)
17  |-assets
18    |-js
19      |-main.js
20    |-sass
21      |-index.scss
22        |-contact
23          |-form.scss
24  |-template
25    |-index.pug
26    |-contact
27      |-form.pug
28      |-conf.pug
29      |-conm.pug

※追記
webpack4で完結させたく開発を進め他のですが、CSSファイルだけ出力されません。
分かる方いましたらお願いいたします。
↓オープンソースとして公開しています。
https://github.com/kagepedia/frontend-dev-env

webpack
1const path = require("path");
2const globule = require('globule');
3const HtmlWebpackPlugin = require('html-webpack-plugin');
4const MiniCssExtractPlugin = require('mini-css-extract-plugin');
5const CopyWebpackPlugin = require('copy-webpack-plugin');
6const { CleanWebpackPlugin } = require('clean-webpack-plugin');
7const FixStyleOnlyEntriesPlugin = require("webpack-fix-style-only-entries");
8
9const targetTypes = {
10  pug: 'html',
11  scss: 'css',
12  js: 'js'
13};
14
15const getEntriesList = (targetTypes) => {
16  const entriesList = {};
17  for(const [ srcType, targetType ] of Object.entries(targetTypes)) {
18    const filesMatched = globule.find([`**/*.${srcType}`, `!**/_*.${srcType}`], { cwd : `${__dirname}/source` });
19    
20    for(const srcName of filesMatched) {
21        let targetName = srcName.replace(new RegExp(`.${srcType}$`, 'i'), `.${targetType}`);
22      if (targetName.indexOf('template/') !== -1) {
23        targetName = targetName.replace('template/', '');
24      }
25      if (targetName.indexOf('assets/scss/') !== -1) {
26        targetName = targetName.replace('assets/scss/', 'assets/css/');
27      }
28      if (targetName.indexOf('assets/js/') !== -1) {
29        targetName = targetName.replace('assets/js/', 'assets/js/');
30      }
31      entriesList[targetName] = `${__dirname}/source/${srcName}`;
32    }
33  }
34  return entriesList;
35}
36
37console.log(getEntriesList({ scss : 'css' }));
38
39const app = (env, argv) => {
40    let sourceMap = 'source-map'
41    if(argv.mode === 'production') {
42      sourceMap = ''
43    }
44
45    const settings = [
46        // HTML
47        {
48            devServer: {
49                contentBase: path.join(__dirname, './public'),
50                open: true
51            },   
52            entry  : getEntriesList({ pug : 'html' }),
53            output : {
54                filename : '[name]',
55                path     : `${__dirname}/public/`
56            },
57            module : {
58                rules : [
59                    {
60                        test : /.pug$/,
61                        use  : [
62                            {
63                                loader: 'pug-loader',
64                                options: {
65                                    pretty: true
66                                }
67                            }
68                        ]
69                    }
70                ]
71            },
72            plugins: [
73                new CopyWebpackPlugin(
74                    [{ from : `${__dirname}/source` }],
75                    { ignore : Object.keys(targetTypes).map((ext) => `*.${ext}`) }
76                ),
77                new CleanWebpackPlugin({
78                    cleanAfterEveryBuildPatterns: ['public'],
79                    exclude: ['public/assets/img']
80                }),
81            ]
82        },
83        // CSS
84        {
85            entry  : getEntriesList({ scss : 'css' }),
86            output : {
87                filename : '[name]',
88                path     : `${__dirname}/public/`,
89            },
90            module: {
91                rules: [
92                    {
93                        test : /.scss$/,
94                        use  : [
95                            MiniCssExtractPlugin.loader,
96                            {
97                                loader: "css-loader",
98                                options: {
99                                    url: false,
100                                    sourceMap: true,
101                                }
102                            },
103                            {
104                                loader: 'sass-loader',
105                                options: {
106                                    sourceMap: true
107                                  }
108                            }
109                        ]
110                    }
111                ]
112            },
113            devtool: sourceMap,
114            plugins: [
115                new FixStyleOnlyEntriesPlugin(),
116                new MiniCssExtractPlugin({
117                    filename: '[name]',
118                })
119            ]
120        },
121        // JS
122        {
123            entry  : getEntriesList({ js : 'js' }),
124            output: {
125                filename : '[name]',
126                path     : `${__dirname}/public/`
127            },
128            module: {
129                rules: [
130                    {
131                        test : /.js$/,
132                        exclude: '/node_modules/',
133                        use: {
134                            loader: 'babel-loader',
135                            options: {
136                                presets: ['babel-preset-env']
137                            }
138                        }
139                    }
140                ]
141            },
142            devtool: sourceMap,
143            plugins: [
144            ]
145        },
146    ];
147
148    // pug -> html
149    for(const [ targetName, srcName ] of Object.entries(getEntriesList({ pug : 'html' }))) {
150        settings[0].plugins.push(new HtmlWebpackPlugin({
151            filename : targetName,
152            template : srcName
153        }));
154    }
155    return settings;
156}
157
158module.exports = app;
159

packagejson
1{
2  "name": "frontend",
3  "version": "1.0.0",
4  "private": true,
5  "description": "",
6  "main": "index.js",
7  "scripts": {
8    "build": "webpack --mode=production",
9    "dev": "webpack --mode=development",
10    "watch": "webpack --mode=development --watch",
11    "start:dev": "webpack-dev-server --mode=none"
12  },
13  "author": "",
14  "license": "ISC",
15  "devDependencies": {
16    "@babel/core": "^7.8.3",
17    "@babel/preset-env": "^7.8.3",
18    "apply-loader": "^2.0.0",
19    "autoprefixer": "^9.7.4",
20    "babel-core": "^6.26.3",
21    "babel-loader": "^8.0.6",
22    "babel-preset-env": "^1.7.0",
23    "clean-webpack-plugin": "^3.0.0",
24    "copy-webpack-plugin": "^5.1.1",
25    "css-loader": "^3.4.2",
26    "globule": "^1.3.0",
27    "html-webpack-plugin": "^3.2.0",
28    "mini-css-extract-plugin": "^0.9.0",
29    "node-sass": "^4.13.1",
30    "postcss-loader": "^3.0.0",
31    "pug": "^2.0.4",
32    "pug-loader": "^2.4.0",
33    "sass-loader": "^8.0.2",
34    "style-loader": "^1.1.3",
35    "webpack": "^4.41.5",
36    "webpack-cli": "^3.3.10",
37    "webpack-dev-server": "^3.10.1",
38    "webpack-fix-style-only-entries": "^0.4.0"
39  },
40  "dependencies": {
41    "jquery": "^3.4.1"
42  }
43}
44

以下のようなエラーがでます。

error
1ERROR in chunk assets/css/main.css [entry]
2    assets/css/main.css
3    Conflict: Multiple chunks emit assets to the same filename assets/css/main.css (chunks 0 and 0)