Почему webpack создает функцию-обертку в собранном css?

Question

[Алексей Ермолаев]

Перевожу проект с Gulp на webpack.
Настраиваю сборку стилей (использую Sass).

Как точку входа использую файл index.scss, куда импортируются остальные модули стилей:

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

Указываю аутпут:

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

Подключаю лоадеры:

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

На выходе в собранном main.css получаю следующее:

/******/ (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;
/******/ 	}   // и так далее

То есть вебпак и при сборке стилей подключает свои функции-обертки. Но ведь тогда файлом css невозможно пользоваться. Мне необходимо, чтобы на выходе получался чистый css. Какие настройки необходимо указать в конфиге, чтобы добиться нужного результата. По возможности хочу узнать больше о причинах такого поведения вебпака.

Полный код конфига:

// 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:

Webpack is a module bundler for modern JavaScript applications.

Стили CSS или любой другой ресурс (в концепте Вебпака) собирается для JS-приложения.
Имея дело лишь с одним CSS в использование Вебпака нету смысла.

Comments

[Алексей Ермолаев]

Это замечательно и понятно, но есть куча туториалов, когда стили собираются вебпаком, и на выходе получается просто css.

[anttoshka]

Алексей Ермолаев: а не разобрались как собирать в отдельный файл, и вместе с этим удалять ненужный js?

[Алексей Ермолаев]

anttoshka: Вообще-то вопрос уже решен, вы бы посмотрели на дату и на то что один из ответов уже отмечен