Настройка Webpack для многостраничных и sass

Question

У меня проблемы с настройкой веб-пакета для группового проекта с несколькими страницами.
Я хочу настроить его так, чтобы у каждого из 3 html-файлов был свой собственный js-файл, связанный с ними, я также хочу, чтобы стили sass были доступны на всех страницах.

Когда я запускаю npm и запускаю dev , файл bundle.js генерируется для каждого html, что хорошо, но в html-файле тег script вводится снова и снова снова в теле, я предполагаю, что это связано с режимом - смотреть ?

В целом, я был бы очень признателен, если бы кто-нибудь просмотрел мои настройки и дал отзыв об оптимизации, спасибо!

package.json

 {
  "name": "",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development --watch",
    "build": "webpack --mode production"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/"
  },
  "keywords": [
    "api"
  ],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^2.1.0",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.5.0",
    "node-sass": "^4.11.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.2.3"
  },
  "dependencies": {
    "jquery": "^3.3.1"
  }
}

webpack.config.js

const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = './resources/'
const output_path = __dirname + '/public'
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const inProduction = process.env.NODE_ENV === 'production'

module.exports = {
  mode: 'development',
  entry:
  {
    main: path + './src/main.js',
    about: path + './src/about.js',
    contact: path + 'src/contact.js',
    sass: path + 'scss/main.scss'
  }
  ,
  output: {
    path: output_path,
    filename: '[name].bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader',
            options: {
              sourceMap: inProduction ? false : true,
              minimize: inProduction ? true : false
            }
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: inProduction ? false : true
            }
          }
        ]
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css'
    }),
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    }),
    new HtmlWebpackPlugin({
      template: './public/main.html',
      chunks: ['main'],
      filename: 'main.html'
    }),
    new HtmlWebpackPlugin({
      template: './public/about.html',
      chunks: ['about'],
      filename: 'about.html'
    }),
    new HtmlWebpackPlugin({
      template: './public/contact.html',
      chunks: ['contact'],
      filename: 'contact.html'
    })
  ]
}