Webpack 4 Having Trouble with Less

I'm new to using webpack and I'm simply trying to get it to handle both the typescript and less files in a new empty .net core web project, and output the corresponding js and css files to a specified folder.

I have managed to get the typescript to work correctly using the awesome-typescript-loader. However, I'm having trouble getting any less loader to work properly.

I've been using webpack's less-loader documentation. However, it is always throwing the following error in the build output:

C:\workspace\fakeproject\node_modules\webpack\lib\Chunk.js:460
1>      throw new Error(
1>        ^
1>EXEC : error : Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

Here is my package.json:

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "devDependencies": {
    "awesome-typescript-loader": "^5.0.0-0",
    "css-loader": "^0.28.10",
    "extract-text-webpack-plugin": "^3.0.2",
    "less-loader": "^4.0.6",
    "style-loader": "^0.20.2",
    "typescript": "^2.7.2",
    "webpack": "^4.1.0",
    "yarn": "^1.5.1"
  },
  "scripts": {
    "build:Debug": "webpack --config webpack.dev.config.js",
    "build:Release": "webpack --config webpack.prod.config.js"
  }
}

and my webpack.dev.config.js:

"use strict"
{
    const path = require('path');
    const outputFolder = "wwwroot/dist/";

    const ExtractTextPlugin = require("extract-text-webpack-plugin");

    const extractLess = new ExtractTextPlugin({
        filename: "[name].[contenthash].css"
    });

    module.exports = {
        "mode": "development",
        "entry": {
            "styles": "./Styles/main.less",
            "scripts": "./Scripts/main.ts",
        },
        "output": {
            "path": path.resolve(__dirname, outputFolder),
            "filename": "[name].js",
        },
        "resolve": {
            "extensions": ['.ts', '.tsx', '.js']
        },
        "devtool": "source-map",
        "module": {
            "rules": [
                {
                    test: /\.less$/,
                    use: extractLess.extract({
                        use: [{
                            loader: "css-loader"
                        }, {
                            loader: "less-loader"
                        }],
                        fallback: "style-loader"
                    })
                },
                {
                    "test": /\.tsx?$/,
                    "loader": 'awesome-typescript-loader',
                    "exclude": /node_modules/,
                }
            ]
        },
        plugins: [
            extractLess
        ]
    };
}

I have a post-build event set up on the project with the following script:

npm run-script build:$(ConfigurationName)

My main.less file is simply as follows:

@light-green: #42f49e;

body {
    background-color: @light-green;
}

Am I doing something wrong or using the wrong versions of dependencies? Thanks in advance for any help.

The Problem isn't your code.
Webpack just updated to version 4 and a lot of plugins are still a bit behind. The breaking changes or not big, so this should soon settle. Until then it might be better to stay on 3.x

For your situation though, there is already a version for extract-text-webpack-plugin with webpack 4 support.
You can install it with.
npm install extract-text-webpack-plugin@next