webpack 2 css loading through entry causing issue

Question

I'm trying to load some css using the entry point in webpack.config.js. I'm using the ExtractTextPlugin but it seems that I get junk in the extracted css file

var path = require('path');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");


var paths = {
    // Source Directory Paths
    nodeModules: './node_modules/',
    scripts: 'Scripts/',
    styles: 'Styles/',
    tests: 'Tests/',

    // Destination Directory Paths
    wwwroot: './wwwroot/',
    css: './css/',
    fonts: './fonts/',
    img: './img/',
    js: './js/'
};


// webpack.config.js
module.exports = {
    entry: {
        'js/site.min.js': './assets/scripts/site.js',
        'css/site.min.css': ['./assets/styles/site.css']
        //'css/bootstrap.min.css': './node_modules/bootstrap/dist/css/bootstrap.min.css'//,
        //'css/bootstrap.min.css.map': './node_modules/bootstrap/dist/css/bootstrap.min.css.map'
    },
    output: {
        filename: '[name]',
        path: './wwwroot/'
    },
    devtool: "source-map",
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: [/node_modules/],
                loader: 'babel-loader',
                options: {
                    presets: [
                        ['es2015', { modules: false }]
                    ]
                }
            },            
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({
                    loader: 'css-loader?importLoaders=1&sourceMap',
                })
            },
            { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
            { test: /\.(woff|woff2)$/, loader: "url?prefix=font/&limit=5000" },
            { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
            { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" },
            { test: /\.png$/, loader: "url-loader?limit=100000" },
            { test: /\.jpg$/, loader: "file-loader" }
        ]
    },
    externals: { jquery: "jQuery" },
    plugins: [
        new CopyWebpackPlugin([
            { from: 'node_modules/bootstrap/dist/css/bootstrap.css', to: paths.css },
            { from: 'node_modules/bootstrap/dist/css/bootstrap.css.map', to: paths.css },
            { from: 'node_modules/bootstrap/dist/css/bootstrap.min.css', to: paths.css },
            { from: 'node_modules/bootstrap/dist/css/bootstrap.min.css.map', to: paths.css },
            { from: 'node_modules/jquery/dist/jquery.js', to: paths.js },
            { from: 'node_modules/jquery/dist/jquery.min.js', to: paths.js },
            { from: 'node_modules/jquery/dist/jquery.min.map', to: paths.js },
            { from: 'node_modules/bootstrap/dist/js/bootstrap.js', to: paths.js },
            { from: 'node_modules/bootstrap/dist/js/bootstrap.min.js', to: paths.js },
            { from: 'node_modules/bootstrap/dist/fonts', to: paths.fonts }
        ]),

        new ExtractTextPlugin({filename: paths.css + 'site.min.css', allChunks: true})        
    ]
}

but following produces this:

body{padding-top:50px;padding-bottom:20px}.body-content{padding-left:15px;padding-right:15px}input,select,textarea{max-width:280px}.carousel-caption p{font-size:20px;line-height:1.4}.btn-bracketed:before{display:inline-block;content:"[";padding-right:.5em}.btn-bracketed:after{display:inline-block;content:"]";padding-left:.5em}.carousel-inner .item img[src$=".svg"]{width:100%}@media screen and (max-width:767px){.carousel-caption{display:none}}.validation-summary-errors h5{margin-top:0}
/*# sourceMappingURL=site.min.css.map*/e,
/******/            exports: {}
/******/        };
/******/
/******/        // Execute the module function
/******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/        // Flag the module as loaded
/******/        module.l = true;
/******/
/******/        // Return the exports of the module
/******/        return module.exports;
/******/    }
/******/
/******/
/******/    // expose the modules object (__webpack_modules__)
/******/    __webpack_require__.m = modules;
/******/
/******/    // expose the module cache
/******/    __webpack_require__.c = installedModules;
/******/
/******/    // identity function for calling harmony imports with the correct context
/******/    __webpack_require__.i = function(value) { return value; };
/******/
/******/    // define getter function for harmony exports
/******/    __webpack_require__.d = function(exports, name, getter) {
/******/        if(!__webpack_require__.o(exports, name)) {
/******/            Object.defineProperty(exports, name, {
/******/                configurable: false,
/******/                enumerable: true,
/******/                get: getter
/******/            });
/******/        }
/******/    };
/******/
/******/    // getDefaultExport function for compatibility with non-harmony modules
/******/    __webpack_require__.n = function(module) {
/******/        var getter = module && module.__esModule ?
/******/            function getDefault() { return module['default']; } :
/******/            function getModuleExports() { return module; };
/******/        __webpack_require__.d(getter, 'a', getter);
/******/        return getter;
/******/    };
/******/
/******/    // Object.prototype.hasOwnProperty.call
/******/    __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/    // __webpack_public_path__
/******/    __webpack_require__.p = "";
/******/
/******/    // Load entry module and return exports
/******/    return __webpack_require__(__webpack_require__.s = 2);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports) {

// removed by extract-text-webpack-plugin

/***/ }),
/* 1 */,
/* 2 */
/***/ (function(module, exports, __webpack_require__) {

module.exports = __webpack_require__(0);


/***/ })
/******/ ]);
/*# sourceMappingURL=site.min.css.map*/

I'm not sure why I'm getting the extra information in my .css file

If I use the following then everything functions correctly

import styles from '../styles/site.css';

Does anyone have any thoughts on this?

UPDATE (POSSIBLY FIXED)

Looks like it doesn't like my entry point name, I changed it to to the following and it seems to work:

'site': ['./assets/styles/site.css']

Answer 1

I don't think webpack is meant to be used with css files as entry points.

You definitely don't need them if you are using the Extract Text Plugin. The Extract Text Plugin will gather all the css files that are imported/required in your js files and put them in a separate css file that you can link to in your html.

In a js file:

import './path/to/styles.css';

or

require('./path/to/styles.css');