How does webpack work in this case?

Question

webpack

How does this code work, what does webpack do? If possible, then point by point
. In my understanding, first the code in the Webpack module is executed, it looks at the contents of the file, if it sees less there, then it applies less-loader
. Then the question arises, what does css-loader do?
The plugin, in my understanding, compresses all this and uploads it to the right folder
. If not, then correct

module: {
    rules: [
        {
            test: /\.less$/,
            use: [
                MiniCssExtractPlugin.loader,
                'css-loader',
                'less-loader'
            ]
        }
    ]
},
plugins: [
    new MiniCssExtractPlugin({
      filename: './css/style.css'
    }),
],