Why does webpack create a wrapper function in the collected css?

Question

JavaScript

I'm migrating a project from Gulp to webpack.
I set up the assembly of styles (I use Sass).
As an entry point I use the index.scss file, where the rest of the style modules are imported:

const entry = [
            "./static/styles/index.scss"
     ];

I specify the output:

output: {
    path: __dirname + "/public",
    	publicPath: "/",
    	filename: "[name].css"
  	},

I connect loaders:

loaders: [
      {
        test: /\.(scss|css)$/,
        loader: "style!css!sass!resolve-url-loader"
      },

At the output in the assembled main.css I get the following:

/******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};
/******/
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/
/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId])
/******/ 			return installedModules[moduleId].exports;
/******/
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = installedModules[moduleId] = {
/******/ 			exports: {},
/******/ 			id: moduleId,
/******/ 			loaded: false
/******/ 		};
/******/
/******/ 		// Execute the module function
/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ 		// Flag the module as loaded
/******/ 		module.loaded = true;
/******/
/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}   // и так далее

That is, webpack also connects its wrapper functions when assembling styles. But then the css file cannot be used. I need the output to be pure css. What settings need to be specified in the config to achieve the desired result. If possible, I want to know more about the reasons for this behavior of webpack.
Full config code:

// webpack.config.js

 "use strict";

const NODE_ENV = process.env.NODE_ENV || "development";
const webpack = require('webpack');
const path = require('path');
const fs = require('fs');
const nodeExternals = require('webpack-node-externals');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

const entry = [
  "./static/styles/index.scss"
  //__dirname + "/static/fonts/"
];

module.exports = {
  entry,
  //target: "web",
  output: {
    path: __dirname + "/public",
    	publicPath: "/",
    	filename: "[name].css"
  	},
  module: {
     loaders: [
      {
        test: /\.(scss|css)$/,
        loader: "style!css!sass!resolve-url-loader"
      },
      {
                               test: /\.(ttf|eot|svg|woff|woff2)$/,
                               loader: "file?name=fonts/[name].[ext]"
        }
      ]
 	},
  watch: NODE_ENV == "development",
  devtool:  NODE_ENV == "development" ? "source-map" : null,
  plugins: [
    new webpack.DefinePlugin({
      NODE_ENV: NODE_ENV
    }),
    new ExtractTextPlugin("main.css")

  ],
  externals: [nodeExternals()]
}

Answer 1

concepts :
CSS styles or any other resource (in the Webpack concept) is collected for a JS application.
When dealing with only one CSS, there is no point in using Webpack.