مشکلات کانفیگ در وب پک

سلام من توی استفاده وب پک دچار مشکل شدم وقتی میخوام از htmlwebpackplugin استفاده کنم این ارور میده

<pre>
  ReferenceError: HTMLwebpackPlugin is not defined

  - loader.js:4 eval
    [index.html?.]/[html-webpack-plugin]/lib/loader.js:4:11

  - loader.js:9 module.exports
    [index.html?.]/[html-webpack-plugin]/lib/loader.js:9:3

  - index.js:406 
    [Myportofilo]/[html-webpack-plugin]/index.js:406:16

  - task_queues.js:97 processTicksAndRejections
    internal/process/task_queues.js:97:5

  - async Promise.all

</pre>

فایل html میسازه ولی ارور میده و خروجی درستی نمایش نمیده فایل کانفیگی که نوشتم به این شکل هست

var HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const { rule } = require('postcss');

module.exports ={
    mode  : 'development', //production
    watch: true,
    entry :{
       main : path.resolve(__dirname,'js/mainpage.js'),
       test : path.resolve(__dirname,'js/test.js')
    },
    output : {
       path : path.resolve(__dirname,'dist/'),
       filename : '[name].webpack.js',
       filename : '[name].webpack.js',
    },
    module :{
        rules : [
            {
                test: /\.(scss|css)$/,
                  use: [
                    // Creates `style` nodes from JS strings
                    "style-loader",
                    // Translates CSS into CommonJS
                    "css-loader",
                    // Compiles Sass to CSS
                    "sass-loader",
                  ],
            }
        ]
    },

    plugins: [
      new HtmlWebpackPlugin({
          hash: true,
          title: 'My Awesome application',
          myPageHeader: 'Hello World',
          template: 'index.html',
          filename: './dist/index.html' //relative to root of the application
      })
 ],

    watchOptions: {
      poll: 2000, // Check for changes every second
      ignored: /node_modules/,
    },
}

توی استفاده کردن از sass-loader هم مشکل دارم و این ارور بهم میده

Module build failed (from ./node_modules/style-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
    at Object.loader (D:\web_project\frameworks\Myportofilo\node_modules\style-loader\dist\index.js:19:24)